{# Command palette — spotlight-style search and action launcher (Cmd+K) #}
{# Parameters: actions (list of {label: str, url: str, group: str|None, icon: str|None}) as JSON #}
{# Actions can also be loaded via data-dz-actions attribute on the element #}
<div x-data="dzCommandPalette"
     data-dz-actions='{{ actions | tojson if actions else "[]" }}'
     x-show="open"
     x-transition:enter="transition ease-out duration-150"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-100"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     @keydown.escape="close()"
     class="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]"
     role="dialog" aria-modal="true" aria-label="Command palette">

  {# Backdrop #}
  <div class="fixed inset-0 bg-black/40" @click="close()"></div>

  {# Palette #}
  <div class="relative w-full max-w-lg bg-base-100 rounded-box shadow-2xl border border-base-300 overflow-hidden"
       @keydown="onKeyDown($event)">

    {# Search input #}
    <div class="flex items-center gap-2 px-4 py-3 border-b border-base-300">
      <svg class="w-5 h-5 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
      </svg>
      <input x-ref="searchInput" x-model="query" type="text"
             placeholder="Type a command..."
             class="input input-ghost w-full focus:outline-none"
             role="combobox" aria-expanded="true" aria-controls="palette-results"
             aria-activedescendant="">
    </div>

    {# Results #}
    <ul id="palette-results" class="max-h-64 overflow-y-auto p-2" role="listbox">
      <template x-for="(action, idx) in filtered" :key="action.label">
        <li :id="'palette-item-' + idx"
            :class="idx === selectedIndex ? 'bg-primary/10 text-primary' : 'hover:bg-base-200'"
            @click="select(action)"
            @mouseenter="selectedIndex = idx"
            role="option"
            :aria-selected="idx === selectedIndex"
            class="flex items-center gap-3 px-3 py-2 rounded cursor-pointer transition-colors">
          <template x-if="action.icon">
            <i :data-lucide="action.icon" class="w-4 h-4"></i>
          </template>
          <div>
            <div class="text-sm font-medium" x-text="action.label"></div>
            <div class="text-xs text-base-content/50" x-text="action.group || ''" x-show="action.group"></div>
          </div>
        </li>
      </template>
      <li x-show="filtered.length === 0" class="px-3 py-6 text-center text-sm text-base-content/50">
        No results found
      </li>
    </ul>

    {# Footer #}
    <div class="flex items-center gap-4 px-4 py-2 border-t border-base-300 text-xs text-base-content/40">
      <span><kbd class="kbd kbd-xs">↑↓</kbd> Navigate</span>
      <span><kbd class="kbd kbd-xs">↵</kbd> Select</span>
      <span><kbd class="kbd kbd-xs">esc</kbd> Close</span>
    </div>
  </div>
</div>