<div class="relative z-10"
     role="dialog"
     aria-modal="true"
     x-show="showSearch"
     x-on:click.away="showSearch = false"
     x-transition
     x-cloak
>
  <div class="fixed inset-0 bg-black bg-opacity-70 transition-opacity"></div>

  <div class="overflow-y-auto fixed inset-0 p-4 sm:p-6 md:p-20">
    <div class="overflow-hidden mx-auto max-w-2xl rounded-xl divide-y divide-gray-500 divide-opacity-20 shadow-2xl transition-all transform bg-charcoal"
         x-on:click.away="showSearch = false"
    >
      <div class="relative">
        <!-- Heroicon name: outline/magnifying-glass -->
        <svg class="absolute top-3.5 left-4 w-5 h-5 pointer-events-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
        </svg>
        <input type="text"
               id="q"
               name="q"
               class="pr-4 pl-11 w-full h-12 placeholder-gray-500 text-white bg-transparent border-0 sm:text-sm focus:ring-0"
               placeholder="Search..."
               hx-get="/api/v1/libraries/"
               hx-trigger="keyup changed delay:500ms, search"
               hx-target="#search_results"
               hx-indicator=".htmx-indicator"
        >
      </div>

      <!-- Results, show/hide based on command palette state. -->
      <ul class="overflow-y-auto p-2 max-h-96 text-sm" id="search_results"></ul>
    </div>
  </div>
</div>
