{{-- Recherche plein-texte du panel Documentation — voir SearchDocumentation. --}}
<div class="relative hidden w-full max-w-xs sm:block">
    <div class="relative">
        <x-filament::icon
            icon="heroicon-o-magnifying-glass"
            class="pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-gray-400"
        />
        <input
            type="search"
            wire:model.live.debounce.250ms="query"
            placeholder="Rechercher dans la documentation…"
            class="w-full rounded-lg border border-gray-950/10 bg-white/70 py-1.5 pr-3 pl-8 text-sm text-gray-900 placeholder:text-gray-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-gray-500"
        />
    </div>

    @if ($query !== '')
        @php $results = $this->results(); @endphp
        <div class="absolute right-0 z-40 mt-2 max-h-[70vh] w-96 max-w-[90vw] overflow-y-auto rounded-xl border border-gray-950/10 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-gray-900">
            @forelse ($results as $result)
                <a
                    href="{{ \App\Filament\Documentation\Pages\ShowDocPage::getUrl(['slug' => $result->page->slug()], panel: 'documentation') }}"
                    class="block rounded-lg px-3 py-2 transition hover:bg-gray-100 dark:hover:bg-white/5"
                >
                    <div class="text-sm font-semibold text-gray-950 dark:text-white">{{ $result->page->title }}</div>
                    <div class="mt-0.5 text-xs text-gray-500 [&_mark]:rounded [&_mark]:bg-primary-200 [&_mark]:px-0.5 [&_mark]:text-gray-950 dark:text-gray-400 dark:[&_mark]:bg-primary-500/40 dark:[&_mark]:text-white">
                        {!! $result->snippetHtml !!}
                    </div>
                </a>
            @empty
                <div class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
                    Aucun résultat pour « {{ $query }} ».
                </div>
            @endforelse
        </div>
    @endif
</div>