{#- chirp-ui: Drawer component
    Slide-out panel from left or right. Uses native <dialog>.

    persist_open: when true, restores open state across boosted navigation via
    localStorage (opt-in — default false).

    Usage:
        from "chirpui/drawer.html" import drawer, drawer_trigger

        drawer_trigger("side-drawer", label="Open panel")

        call drawer("side-drawer", title="Filters", side="right")
            <p>Drawer content.</p>
        end
-#}

{% def drawer(id, title=none, side="right", persist_open=false, cls="") %}
<dialog id="{{ id }}" class="chirpui-drawer chirpui-drawer--{{ side }}{{ " " ~ cls if cls else "" }}"
        closedby="any"
        x-data="chirpuiDrawer({ id: '{{ id }}', side: '{{ side }}', persistOpen: {{ 'true' if persist_open else 'false' }} })"
        x-init="init()">
    <div class="chirpui-drawer__panel">
        {% if title %}
        <header class="chirpui-drawer__header">
            <h2 class="chirpui-drawer__title">{{ title }}</h2>
            <div class="chirpui-drawer__header-actions">{% slot header_actions %}</div>
            <form method="dialog">
                <button class="chirpui-drawer__close" aria-label="Close">&times;</button>
            </form>
        </header>
        {% end %}
        <div class="chirpui-drawer__body">
            {% slot %}
        </div>
    </div>
</dialog>
{% end %}

{% def drawer_trigger(target, label="Open", cls="") %}
<button class="chirpui-drawer-trigger{{ " " ~ cls if cls else "" }}"
        type="button"
        x-data="chirpuiDialogTarget()"
        data-dialog-target="{{ target }}"
        @click="open()">
    {{ label }}
</button>
{% end %}