{{--
    Site search: a modal opened by the header's magnifier, Ctrl K or "/". The list of pages, products and modules is
    embedded as JSON (App\Support\SiteSearch) and filtered in the browser by resources/js/app.js; no request is made.
    Without JavaScript the dialog never opens (the button is the only way in), and every page is still in the menus.
--}}
<dialog data-search-dialog aria-label="Search the site"
        class="mx-auto mt-[10vh] max-h-[80vh] w-[min(42rem,calc(100vw-2rem))] overflow-hidden rounded-2xl border-0 bg-white p-0 text-slate-700 shadow-2xl backdrop:bg-navy-900/60">
    <div class="flex items-center gap-3 border-b border-slate-200 px-4">
        <x-icon name="search" class="h-5 w-5 shrink-0 text-slate-400" />
        <label for="site-search-input" class="sr-only">Search pages, products and modules</label>
        <input id="site-search-input" data-search-input type="search" autocomplete="off" spellcheck="false" placeholder="Search pages, products and modules, e.g. lab or ABHA"
               role="combobox" aria-expanded="true" aria-controls="site-search-results" aria-autocomplete="list"
               class="h-14 w-full border-0 bg-transparent text-base text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-0">
        <button type="button" data-search-close class="shrink-0 rounded-md border border-slate-200 px-2 py-1 text-xs font-semibold text-slate-500 hover:bg-slate-50">Esc</button>
    </div>

    <ul id="site-search-results" data-search-results role="listbox" aria-label="Results" class="max-h-[55vh] overflow-y-auto p-2"></ul>
    <p data-search-empty hidden class="px-5 py-10 text-center text-sm text-slate-500">
        No matches for &ldquo;<span data-search-term class="font-semibold text-slate-700"></span>&rdquo;. Try a shorter word, or <a href="{{ route('contact') }}" class="font-semibold text-brand-700 hover:underline">contact us</a>.
    </p>
    <p class="border-t border-slate-100 bg-slate-50 px-4 py-2 text-xs text-slate-500" aria-hidden="true">
        <kbd class="rounded border border-slate-200 bg-white px-1.5 py-0.5 font-sans">&uarr;</kbd> <kbd class="rounded border border-slate-200 bg-white px-1.5 py-0.5 font-sans">&darr;</kbd> to move,
        <kbd class="rounded border border-slate-200 bg-white px-1.5 py-0.5 font-sans">Enter</kbd> to open
    </p>

    {{-- One result row. app.js clones it for each match. --}}
    <template data-search-template>
        <li role="option">
            <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2.5 data-active:bg-brand-50">
                <span class="icon-tile h-10 w-10 rounded-lg"><x-icon name="arrow" class="h-5 w-5" /></span>
                <span class="min-w-0 flex-1">
                    <span data-search-title class="block truncate text-sm font-semibold text-slate-900"></span>
                    <span data-search-desc class="block truncate text-xs text-slate-500"></span>
                </span>
                <span data-search-type class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-600"></span>
            </a>
        </li>
    </template>

    <script type="application/json" data-search-data>{!! json_encode(\App\Support\SiteSearch::entries(), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}</script>
</dialog>