{# Macro command_palette
   ⌘K / Ctrl+K. La host app debe exponer ``search_url`` que devuelva HTML
   con resultados; htmx-events.js registra el shortcut y abre el dialog.

   Uso:
     {% from "core/components/command_palette.html" import command_palette %}
     {{ command_palette(search_url="/search") }}
#}
{% macro command_palette(search_url="/search", input_name="q",
                         placeholder="Buscar acciones, páginas, recursos...") %}
<div id="dg-command-palette"
     role="dialog"
     aria-modal="true"
     aria-label="Paleta de comandos"
     class="hidden fixed inset-0 z-50 flex items-start justify-center pt-24 p-4"
     style="background: rgba(0,0,0,0.45);"
     onclick="if(event.target===this) window.closeModal && window.closeModal('dg-command-palette')">
  <div class="bg-panel rounded-xl shadow-modal w-full max-w-xl overflow-hidden"
       onclick="event.stopPropagation()">
    <form class="flex items-center px-4 py-3 border-b border-border gap-3"
          hx-get="{{ search_url }}"
          hx-trigger="keyup changed delay:120ms from:input"
          hx-target="#dg-command-results"
          hx-swap="innerHTML">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-fg-muted" viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
           stroke-linejoin="round" aria-hidden="true">
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <input type="text"
             name="{{ input_name }}"
             autocomplete="off"
             placeholder="{{ placeholder }}"
             class="flex-1 bg-transparent outline-none text-sm text-fg placeholder:text-fg-muted"
             aria-label="Buscar" />
      <kbd class="text-[10px] font-mono text-fg-muted border border-border rounded px-1.5 py-0.5">ESC</kbd>
    </form>
    <div id="dg-command-results"
         class="max-h-80 overflow-y-auto py-2 text-sm text-fg"
         role="listbox"
         aria-label="Resultados de búsqueda"></div>
  </div>
</div>
{%- endmacro %}