{{--
    Filters the sidebar's own navigation items client-side. Rendered at the
    SIDEBAR_NAV_START render hook, right above <ul class="fi-sidebar-nav-groups">
    (see vendor/filament/filament/resources/views/livewire/sidebar.blade.php).

    Replaces the topbar's global-search box (removed via ->globalSearch(false)
    on both panels): with this many navigation items, finding a menu by typing
    its name beats scanning collapsed groups. This searches LABELS only, not
    record data — an entirely different, much simpler feature than the global
    search it replaces.

    Plain DOM filtering rather than a Livewire/Alpine store rewrite of the nav
    itself: `.fi-sidebar-item` (label) and its wrapping `.fi-sidebar-group`
    (heading) carry no reactive state of their own in Filament's markup — only
    a group's `.fi-sidebar-group-items` <ul> does (the collapse/expand
    animation, via the `sidebar` Alpine store). Hiding/showing items and group
    <li>s directly is therefore safe; a matching item inside a group the user
    had collapsed is expanded through that same store (and re-collapsed when
    the search is cleared) so a hit is never hidden behind a closed group.

    x-show below hides this box on the desktop-collapsed (icon-only) rail,
    same as every other wide element in the sidebar — the logo text and each
    item's label are hidden the same way, off the same `$store.sidebar.isOpen`
    flag (see vendor/filament/filament/resources/views/livewire/sidebar.blade.php
    and .../components/sidebar/item.blade.php). Without it, this was the only
    thing in the rail NOT hiding: a bare `<input>` has no icon-sized content to
    shrink to, so with it always visible it alone forced the whole (auto-width)
    rail to stay exactly as wide as the search box even while "collapsed" —
    the "closes but the search bar keeps it wide" bug. Only an enter transition
    is defined (fade in, delayed to start once the rail is nearly done
    widening) — collapsing hides it instantly, matching the item-label
    convention, so the search box's own fade-out never competes with the
    rail's own width transition (see theme.css).
--}}
@php
    $isSidebarCollapsibleOnDesktop = filament()->isSidebarCollapsibleOnDesktop();
    $isSidebarFullyCollapsibleOnDesktop = filament()->isSidebarFullyCollapsibleOnDesktop();
@endphp
<div
    @if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop)
        x-show="$store.sidebar.isOpen"
        x-transition:enter="transition ease-out duration-150 delay-100"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
    @endif
    class="fi-sidebar-nav-search-ctn"
    style="padding: 0.75rem 0.75rem 0.25rem;"
>
    <div
        class="relative"
        x-data="{
            q: '',
            autoExpanded: [],
            run() {
                const root = document.getElementById('fi-main-sidebar');
                if (! root) return;

                const query = this.q.trim().toLowerCase();
                const groups = root.querySelectorAll('.fi-sidebar-group');

                if (query === '') {
                    root.querySelectorAll('.fi-sidebar-item').forEach((li) => { li.hidden = false; });
                    groups.forEach((li) => { li.hidden = false; });

                    this.autoExpanded.forEach((label) => {
                        if (! Alpine.store('sidebar').groupIsCollapsed(label)) {
                            Alpine.store('sidebar').toggleCollapsedGroup(label);
                        }
                    });
                    this.autoExpanded = [];

                    return;
                }

                groups.forEach((groupLi) => {
                    let anyVisible = false;

                    groupLi.querySelectorAll('.fi-sidebar-item').forEach((itemLi) => {
                        const label = itemLi.querySelector('.fi-sidebar-item-label')?.textContent ?? '';
                        const matches = label.toLowerCase().includes(query);
                        itemLi.hidden = ! matches;
                        anyVisible = anyVisible || matches;
                    });

                    groupLi.hidden = ! anyVisible;

                    if (! anyVisible) return;

                    const label = groupLi.dataset.groupLabel;
                    if (! label) return;

                    if (Alpine.store('sidebar').groupIsCollapsed(label)) {
                        Alpine.store('sidebar').toggleCollapsedGroup(label);
                        this.autoExpanded.push(label);
                    }
                });
            },
        }"
    >
        <svg class="pointer-events-none absolute inset-y-0 start-2.5 my-auto h-4 w-4 text-gray-400 dark:text-gray-500" 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 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
        <input
            type="search"
            x-model="q"
            x-on:input.debounce.150ms="run()"
            placeholder="Search menu…"
            aria-label="Search navigation menu"
            class="fi-input block w-full rounded-lg border-none bg-gray-50 py-1.5 ps-8 pe-3 text-sm text-gray-900 shadow-sm ring-1 ring-gray-200 focus:ring-2 focus:ring-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10"
        >
    </div>
</div>
