{{--
    Navegação rápida (Ctrl+K): progressive enhancement **nativo**.
    A lista chega pronta do servidor e é uma lista de links de verdade — sem JS o menu abre
    (Popover API, gatilho no header) e todos os destinos continuam clicáveis; com JS ganha filtro
    e navegação por setas.
--}}
<div id="cms-palette" class="cms-palette" popover role="dialog"
     aria-label="{{ __('layout::shell.search') }}">
    <div class="cms-palette__panel">
        <label class="sr-only" for="cms-palette-input">{{ __('layout::shell.search') }}</label>

        <input id="cms-palette-input" type="search"
               class="input input-bordered w-full"
               data-cms-palette-input
               placeholder="{{ __('layout::shell.search_placeholder') }}"
               autocomplete="off" spellcheck="false">

        <p class="cms-palette__empty" data-cms-palette-empty hidden>{{ __('layout::shell.search_empty') }}</p>

        <ul class="cms-palette__list" data-cms-palette-list>
            @foreach ($paletteItems as $entry)
                {{-- `search` já vem traduzido **e normalizado** do shell: o filtro do cliente não
                     conhece chave de tradução nem acento. --}}
                <li data-cms-palette-item data-search="{{ $entry['search'] }}">
                    <a href="{{ $entry['url'] }}">
                        <span class="cms-palette__title">{{ __($entry['title_key']) }}</span>
                        @if (filled($entry['context_key']))
                            <span class="cms-palette__context">{{ __($entry['context_key']) }}</span>
                        @endif
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
</div>