{# Plan 61/2a — cmd-K quick-search palette.

   Mounted by base.html for every authenticated admin page. Index is
   built server-side from `cmd_k_index` (a list of `{label, href,
   category, icon, keywords}` dicts) — see
   `routes/admin_ui/_auth.py::_admin_context` for the source list.

   Triggers: ⌘K / Ctrl+K (plus the header's "Search…" button which
   dispatches a `cmdk:open` window event). The `/` and `?` shortcuts
   were removed — they leaked into shadow-DOM inputs (deep-chat,
   contenteditable) where event.target is the host element, not the
   inner field, so the isTextInput guard couldn't suppress them.

   Visual: Vercel-style centered modal with backdrop-blur. The list
   is grouped by category. Arrow keys + Enter; Esc closes.

   Aria: input is the combobox host; the <ul> is `role="listbox"`; rows
   are `role="option"`. Active row is reflected by `aria-selected="true"`
   matching the visible highlight. #}
{# No x-init="init()" — Alpine auto-runs a component method named init().
   Calling it again here registered the global keydown listener TWICE, so
   cmd+K opened then instantly toggled itself shut. Let Alpine call it once. #}
<div x-data='cmdKPalette({{ cmd_k_index|tojson if cmd_k_index else "[]" }})'
     @keydown.escape.window="hide()">
  <template x-teleport="body">
    {# Use :class toggle instead of x-show — x-teleport + x-show + x-transition
       has a known flicker/auto-close bug in Alpine 3.15. The `hidden` Tailwind
       class is plain `display: none`. #}
    <div :class="open ? 'flex items-start justify-center' : 'hidden'"
         class="fixed inset-0 z-50 pt-[12vh] px-4"
         role="dialog"
         aria-modal="true"
         aria-label="Quick search">
      <div class="modal-backdrop" @click="hide()"></div>
      <div class="modal-card relative w-full max-w-xl">
        <div class="flex items-center gap-2 px-4 py-3 border-b border-white/[0.06]">
          <i data-lucide="search" class="w-4 h-4 text-ink-500 flex-shrink-0"></i>
          <input
            x-ref="searchInput"
            type="text"
            x-model="query"
            @input="onInput()"
            @keydown.arrow-down="onArrowDown($event)"
            @keydown.arrow-up="onArrowUp($event)"
            @keydown.enter="onEnter($event)"
            placeholder="Jump to a page, wizard or doc…"
            class="flex-1 bg-transparent outline-none border-none text-[14px] text-ink-100 placeholder:text-ink-500"
            autocomplete="off"
            spellcheck="false"
            role="combobox"
            aria-expanded="true"
            aria-controls="cmdk-listbox"
            aria-autocomplete="list">
          <span class="cmdk-kbd">Esc</span>
        </div>
        <div id="cmdk-listbox"
             role="listbox"
             aria-label="Search results"
             class="max-h-[60vh] overflow-y-auto py-1.5">
          <template x-for="(items, category) in grouped" :key="category">
            <div>
              <div class="cmdk-group-label" x-text="category"></div>
              <template x-for="item in items" :key="item.href">
                <a :href="item.href"
                   class="cmdk-row mx-1.5 my-0.5"
                   role="option"
                   :aria-selected="isActive(item).toString()"
                   @mouseenter="activeIndex = filtered.indexOf(item)"
                   @click.prevent="window.location.href = item.href">
                  <i x-show="item.icon" :data-lucide="item.icon" class="w-3.5 h-3.5 text-ink-400 flex-shrink-0"></i>
                  <span class="text-[13px]" x-text="item.label"></span>
                  <span class="ml-auto text-[11px] text-ink-500" x-text="item.href"></span>
                </a>
              </template>
            </div>
          </template>
          <template x-if="filtered.length === 0">
            <div class="px-4 py-6 text-center text-footnote text-ink-500">
              No matches. Try a different keyword.
            </div>
          </template>
        </div>
        <div class="flex items-center justify-between px-4 py-2 border-t border-white/[0.06] text-[11px] text-ink-500">
          <div class="flex items-center gap-2">
            <span class="cmdk-kbd">↑</span><span class="cmdk-kbd">↓</span>
            <span>Navigate</span>
            <span class="cmdk-kbd">↵</span>
            <span>Open</span>
          </div>
          <div class="flex items-center gap-1">
            <span class="cmdk-kbd">⌘K</span>
            <span class="text-ink-600">·</span>
            <span class="cmdk-kbd">Ctrl K</span>
          </div>
        </div>
      </div>
    </div>
  </template>
</div>