<div 
  class="relative"
  x-on:@keydown.escape.prevent.stop="menuClose()"
>
  <button 
    type="button" 
    class="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900" 
    @click="menuToggle();console.log('menu open',menuIsOpen(), !menuIsOpen())"
    :aria-expanded="menuIsOpen()"
    :aria-controls="$id('search-menu-dropdown')"
  >
    <span class="hidden lg:inline">Menu</span> 
    <svg 
      id="#open-search-menu"
      class="h-5 w-5 lg:hidden" 
      x-show="menuIsOpen()"
      viewBox="0 0 24 24" 
      fill="none" 
      stroke="currentColor" 
      aria-hidden="menuIsOpen()" 
      data-slot="icon-hamburger-down" 
    >
      <path 
        stroke-linecap="round" 
        stroke-linejoin="round" 
        stroke-width="2" 
        d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0-3.75-3.75M17.25 21 21 17.25"
      /> 
    </svg>
    <svg 
      class="h-5 w-5 lg:hidden" 
      x-show="!menuIsOpen()"
      viewBox="0 0 24 24" 
      fill="none" 
      stroke="currentColor" 
      aria-hidden="!menuIsOpen()" 
      data-slot="icon-hamburger-up" 
    >
      <path 
        stroke-linecap="round" 
        stroke-linejoin="round" 
        stroke-width="2" 
        d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0-3.75-3.75M17.25 21 21 17.25"
      /> 
    </svg>

    <svg 
      class="h-5 w-5 hidden lg:inline" 
      viewBox="0 0 20 20" 
      fill="currentColor" 
      aria-hidden="true" 
      data-slot="icon-arrow"
    >
      <path 
        fill-rule="evenodd" 
        d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" 
        clip-rule="evenodd"  
      />
    </svg>
  </button>

  <div
    :id="$id('search-menu-dropdown')"
    x-ref="menuPanel"
    x-show="menuIsOpen()"
    x-trap="menuIsOpen()"
    x-transition:enter="transition ease-out duration-200 transform"
    x-transition:enter-start="opacity-0 -translate-y-2"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-out duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    x-cloak
    class="absolute  z-10 mt-5 flex w-screen max-w-max right-0 px-4"
  >
    <div class="w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
      <div class="p-4">
        <div 
          x-show="canAddNewTag && permittedToAddTags" 
          x-on:click="createNewTag(); menuClose()"
          class="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
          <div class="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
            <svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 12h14m-7 7V5"/>
            </svg>
          </div>
          <div>
            <a 
              href="#" 
              class="font-semibold text-gray-900">
              Add
              <span class="absolute inset-0"></span>
            </a>
            <p class="mt-1 text-gray-600">Add a new tag.</p>
          </div>
        </div>
        <div class="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
          <div class="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
            <svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
              <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m6 6 12 12m3-6a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
          </div>

          <div>
            <a 
              href="#" 
              x-on:click="clearSearch()"
              class="font-semibold text-gray-900">
              Clear
              <span class="absolute inset-0"></span>
            </a>
            <p class="mt-1 text-gray-600">Clear search bar.</p>
          </div>
        </div>
        <div class="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
          <div class="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
            <svg 
              class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" 
              fill="none" 
              viewBox="0 0 24 24" 
              stroke-width="1.5" 
              stroke="currentColor" 
              aria-hidden="true" 
              data-slot="icon">
              <path 
                stroke="currentColor" 
                stroke-linecap="round" 
                stroke-linejoin="round" 
                stroke-width="2" 
                d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"/>
            </svg>
          </div>
          <div>
            <a 
              href="#" 
              x-on:click="deselectTag()"
              class="font-semibold text-gray-900">
              Remove
              <span class="absolute inset-0"></span>
            </a>
            <p class="mt-1 text-gray-600">Unselect all tags.</p>
          </div>
        </div>
      </div>

      {% if help_url or mgmt_url %}
      <div class="bg-gray-50 p-8">
        <ul role="list" class="mt-2 space-y-6">
          {% if help_url %}
          <li class="relative">
            <div class="group relative flex gap-x-6 rounded-lg p-4 hover:bg-white">
              <div class="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  fill="none" 
                  viewBox="0 0 24 24" 
                  stroke-width="2" 
                  stroke="currentColor" 
                  class="h-6 w-6 mr-2 text-gray-600 group-hover:text-indigo-600"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
                </svg>
              </div>
              <div>
                <a 
                  href="{{ help_url }}"
                  class="font-semibold text-gray-900">
                  Help
                  <span class="absolute inset-0"></span>
                </a>
                <p class="mt-1 text-gray-600">Help with tags.</p>
              </div>
            </div>
          </li>
          {% endif %}
          {% if mgmt_url %}
          <li class="relative">
            <div class="group relative flex gap-x-6 rounded-lg p-4 hover:bg-white">
              <div class="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  fill="none" 
                  viewBox="0 0 24 24" 
                  stroke-width="2" 
                  stroke="currentColor" 
                  class="h-6 w-6 mr-2 text-gray-600 group-hover:text-indigo-600"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
                </svg>
              </div>
              <div>
                <a 
                  href="{{ mgmt_url }}" 
                  class="font-semibold text-gray-900">
                  Tag Management
                  <span class="absolute inset-0"></span>
                </a>
                <p class="mt-1 text-gray-600">Tag admin centre.</p>
              </div>
            </div>
          </li>
          {% endif %}
        </ul>
      </div>
      {% endif %}
    </div>
  </div>
</div>
