<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-60">
  <div class="w-full">
    <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2" for="location">Location</label>
    <select name="location" id="location" required
      class="block w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm shadow-black/5 transition duration-200 placeholder:text-zinc-500 hover:border-zinc-400 focus:outline-none focus:ring-0 focus:border-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:shadow-black/30 dark:hover:border-zinc-500 dark:focus:border-zinc-500">
      <option>United States</option>
      <option selected>Canada</option>
      <option>Mexico</option>
    </select>
  </div>
</div>

<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-60">
  <div class="w-full">
    <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2" for="assign_to">Assigned to</label>
    <el-select id="assign_to" name="assign_to" value="1" class="mt-2 block">
      <button type="button"
        class="grid w-full cursor-pointer grid-cols-1 text-left rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm shadow-black/5 transition duration-200 placeholder:text-zinc-500 hover:border-zinc-400 focus:outline-none focus:ring-0 focus:border-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:shadow-black/30 dark:hover:border-zinc-500 dark:focus:border-zinc-500">
        <el-selectedcontent class="col-start-1 row-start-1 truncate pr-6">Lukas Sommerfeld</el-selectedcontent>
        <i class="hgi hgi-stroke hgi-rounded hgi-arrow-down-01 col-start-1 row-start-1 self-center justify-self-end text-gray-500 icon-sm dark:text-gray-400"></i>
      </button>
    
      <el-options anchor="bottom start" popover
        class="m-0 max-h-60 w-[var(--button-width)] overflow-auto rounded-2xl bg-white p-1 shadow-lg outline outline-1 outline-black/5 transition [--anchor-gap:theme(spacing.2)] [transition-behavior:allow-discrete] data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-900 dark:shadow-none dark:-outline-offset-1 dark:outline-zinc-800">
        <el-option value="1"
          class="group/option relative cursor-pointer select-none block rounded-xl pl-4 pr-9 py-2 text-sm text-gray-900 hover:bg-gray-100 outline-none dark:text-white dark:hover:bg-zinc-800 [&:not([hidden])]:block">
          <span class="block truncate font-normal group-aria-selected/option:font-semibold">Lukas Sommerfeld</span>
          <span
            class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-[:not([aria-selected='true'])]/option:hidden dark:text-primary-400 [el-selectedcontent_&]:hidden">
            <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
              <path
                d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                clip-rule="evenodd" fill-rule="evenodd" />
            </svg>
          </span>
        </el-option>
        <el-option value="2"
          class="group/option relative cursor-pointer select-none block rounded-xl pl-4 pr-9 py-2 text-sm text-gray-900 hover:bg-gray-100 outline-none dark:text-white dark:hover:bg-zinc-800 [&:not([hidden])]:block">
          <span class="block truncate font-normal group-aria-selected/option:font-semibold">Tom Nessel</span>
          <span
            class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-[:not([aria-selected='true'])]/option:hidden dark:text-primary-400 [el-selectedcontent_&]:hidden">
            <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
              <path
                d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                clip-rule="evenodd" fill-rule="evenodd" />
            </svg>
          </span>
        </el-option>
        <el-option value="3"
          class="group/option relative cursor-pointer select-none block rounded-xl pl-4 pr-9 py-2 text-sm text-gray-900 hover:bg-gray-100 outline-none dark:text-white dark:hover:bg-zinc-800 [&:not([hidden])]:block">
          <span class="block truncate font-normal group-aria-selected/option:font-semibold">Tobias Poswistak</span>
          <span
            class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-[:not([aria-selected='true'])]/option:hidden dark:text-primary-400 [el-selectedcontent_&]:hidden">
            <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
              <path
                d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                clip-rule="evenodd" fill-rule="evenodd" />
            </svg>
          </span>
        </el-option>
      </el-options>
    </el-select>
  </div>
</div>

{% load static %}
<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-72">
  <div class="w-full">
    <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2" for="assign_to">Assigned to</label>
    <el-select id="assign_to" name="assign_to" value="1" class="mt-2 block" data-select-search>
      <button type="button"
        class="grid w-full cursor-pointer grid-cols-1 text-left rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm shadow-black/5 transition duration-200 placeholder:text-zinc-500 hover:border-zinc-400 focus:outline-none focus:ring-0 focus:border-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:shadow-black/30 dark:hover:border-zinc-500 dark:focus:border-zinc-500">
        <el-selectedcontent class="col-start-1 row-start-1 truncate pr-6">Lukas Sommerfeld</el-selectedcontent>
        <i class="hgi hgi-stroke hgi-rounded hgi-arrow-down-01 col-start-1 row-start-1 self-center justify-self-end text-gray-500 icon-sm dark:text-gray-400"></i>
      </button>
    
      <el-options anchor="bottom start" popover
        class="m-0 w-[var(--button-width)] overflow-auto rounded-2xl bg-white p-1 shadow-lg outline outline-1 outline-black/5 transition [--anchor-gap:theme(spacing.2)] [transition-behavior:allow-discrete] data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-900 dark:shadow-none dark:-outline-offset-1 dark:outline-zinc-800">

        <div class="w-full mb-4 mt-2 px-2">
          <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2" for="search">Search employees</label>
          <input type="text" name="search" id="search"
            data-select-search-input
            placeholder="Type the name or mail of the employee"
            class="block w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm shadow-black/5 transition duration-200 placeholder:text-zinc-500 hover:border-zinc-400 focus:outline-none focus:ring-0 focus:border-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:shadow-black/30 dark:hover:border-zinc-500 dark:focus:border-zinc-500">
        </div>

        <div class="max-h-60 overflow-auto w-full" data-select-search-options>
          <el-option value="1" data-select-search-option data-search-text="Lukas Sommerfeld lukas.sommerfeld@lf8-systems.de"
            class="group/option relative cursor-pointer select-none rounded-xl pl-4 pr-9 py-2 text-sm text-gray-900 hover:bg-gray-100 outline-none dark:text-white dark:hover:bg-zinc-800 [&:not([hidden])]:block">
            <span class="block truncate font-normal group-aria-selected/option:font-semibold">Lukas Sommerfeld</span>
            <span
              class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-[:not([aria-selected='true'])]/option:hidden dark:text-primary-400 [el-selectedcontent_&]:hidden">
              <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
                <path
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd" fill-rule="evenodd" />
              </svg>
            </span>
          </el-option>
          <el-option value="2" data-select-search-option data-search-text="Tom Nessel tom.nessel@lf8-systems.de"
            class="group/option relative cursor-pointer select-none rounded-xl pl-4 pr-9 py-2 text-sm text-gray-900 hover:bg-gray-100 outline-none dark:text-white dark:hover:bg-zinc-800 [&:not([hidden])]:block">
            <span class="block truncate font-normal group-aria-selected/option:font-semibold">Tom Nessel</span>
            <span
              class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-[:not([aria-selected='true'])]/option:hidden dark:text-primary-400 [el-selectedcontent_&]:hidden">
              <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
                <path
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd" fill-rule="evenodd" />
              </svg>
            </span>
          </el-option>
          <el-option value="3" data-select-search-option data-search-text="Tobias Poswistak tobias.poswistak@lf8-systems.de"
            class="group/option relative cursor-pointer select-none rounded-xl pl-4 pr-9 py-2 text-sm text-gray-900 hover:bg-gray-100 outline-none dark:text-white dark:hover:bg-zinc-800 [&:not([hidden])]:block">
            <span class="block truncate font-normal group-aria-selected/option:font-semibold">Tobias Poswistak</span>
            <span
              class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-[:not([aria-selected='true'])]/option:hidden dark:text-primary-400 [el-selectedcontent_&]:hidden">
              <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
                <path
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd" fill-rule="evenodd" />
              </svg>
            </span>
          </el-option>
        </div>

        <p class="hidden px-4 py-3 text-sm text-gray-500 dark:text-gray-400" data-select-search-empty>
          No employees found.
        </p>
      </el-options>
    </el-select>
  </div>
</div>

(function () {
  function normalizeValue(value) {
    return String(value || '')
      .toLowerCase()
      .replace(/\s+/g, ' ')
      .trim();
  }

  function setupSelectSearch(selectElement) {
    const searchInput = selectElement.querySelector('[data-select-search-input]');
    const optionsContainer = selectElement.querySelector('[data-select-search-options]');
    const emptyState = selectElement.querySelector('[data-select-search-empty]');
    const optionsPanel = selectElement.querySelector('el-options');

    if (!searchInput || !optionsContainer || !optionsPanel) {
      return;
    }

    const options = Array.from(optionsContainer.querySelectorAll('[data-select-search-option]'));

    function applySearch() {
      const query = normalizeValue(searchInput.value);
      let visibleOptions = 0;

      options.forEach(function (option) {
        const searchableText = normalizeValue(option.dataset.searchText || option.textContent);
        const matches = !query || searchableText.includes(query);

        option.hidden = !matches;
        option.classList.toggle('hidden', !matches);
        option.setAttribute('aria-hidden', matches ? 'false' : 'true');

        if (matches) {
          visibleOptions += 1;
        }
      });

      if (emptyState) {
        emptyState.classList.toggle('hidden', visibleOptions > 0);
      }
    }

    searchInput.addEventListener('keydown', function (event) {
      if (event.key === 'Tab' || event.key === 'Escape') {
        return;
      }

      event.stopPropagation();

      if (event.key === 'Enter') {
        event.preventDefault();
      }
    });

    searchInput.addEventListener('input', applySearch);

    optionsPanel.addEventListener('toggle', function (event) {
      if (event.newState === 'open') {
        searchInput.focus();
        applySearch();
        return;
      }

      searchInput.value = '';
      applySearch();
    });

    applySearch();
  }

  document.querySelectorAll('[data-select-search]').forEach(setupSelectSearch);
})();