{#- 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
     @keydown.window.meta.k.prevent="document.getElementById('{{ id }}')?.showModal()"
     @keydown.window.ctrl.k.prevent="document.getElementById('{{ id }}')?.showModal()">
<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", cls="") %}
<button type="button"
        class="chirpui-command-palette__trigger{{ " " ~ cls if cls else "" }}"
        x-data
        @click="document.getElementById('{{ target }}').showModal()">
    {{ label }} <kbd class="chirpui-command-palette__kbd">⌘K</kbd>
</button>
{% end %}