{#- chirp-ui: Command Palette component
    Cmd+K search overlay using native <dialog>.
    Results load via htmx into the results container.

    Usage:
        from "chirpui/command_palette.html" import command_palette, command_palette_trigger

        command_palette_trigger()
        command_palette(search_url="/search")
-#}

{% def command_palette(id="command-palette", search_url="/search", placeholder="Search...") %}
<div x-data="chirpuiDialogTarget()"
     data-dialog-target="{{ id }}"
     @keydown.window.meta.k.prevent="open()"
     @keydown.window.ctrl.k.prevent="open()">
<dialog id="{{ id }}" class="chirpui-command-palette" closedby="any">
    <div class="chirpui-command-palette__inner">
        <input type="search" class="chirpui-command-palette__input"
               placeholder="{{ placeholder }}"
               hx-get="{{ search_url }}" hx-trigger="input changed delay:200ms"
               hx-target="#{{ id }}-results" hx-swap="innerHTML"
               name="q" autocomplete="off" autofocus>
        <div id="{{ id }}-results" class="chirpui-command-palette__results">
            {% slot %}
        </div>
    </div>
</dialog>
</div>
{% end %}

{% def command_palette_trigger(target="command-palette", label="Search", placeholder=none, shortcut="⌘K", icon=none, aria_label=none, density="md", cls="") %}
{% set density = density | validate_variant(("sm","md"), "md") %}
{% set visible_label = placeholder if placeholder is not none else label %}
{% set control_label = aria_label if aria_label is not none else label %}
<button type="button"
        class="chirpui-command-palette__trigger chirpui-command-palette-trigger chirpui-command-palette-trigger--{{ density }}{{ " " ~ cls if cls else "" }}"
        aria-label="{{ control_label }}"
        x-data="chirpuiDialogTarget()"
        data-dialog-target="{{ target }}"
        @click="open()">
    {% if icon %}<span class="chirpui-command-palette__trigger-icon" aria-hidden="true">{{ icon | icon }}</span>{% end %}
    <span class="chirpui-command-palette__trigger-label">{{ visible_label }}</span>
    {% if shortcut %}<kbd class="chirpui-command-palette__kbd">{{ shortcut }}</kbd>{% end %}
</button>
{% end %}