{#- chirp-ui: Tray (slide-out panel)
    Use tray_trigger to open, tray for content. Requires Alpine.js (Alpine.store('trays')).

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

    Usage:
        from "chirpui/tray.html" import tray, tray_trigger

        {{ tray_trigger("filters", "Filters", icon="⚙") }}
        {% call tray("filters", "Filters", position="right") %}
            <form>...</form>
        {% end %}
-#}

{% def tray_trigger(id, label, icon=none) %}
<button type="button" class="chirpui-btn chirpui-btn--default chirpui-btn--sm"
        x-data="{ get trayId() { return $el.dataset.trayId } }"
        data-tray-id="{{ id }}"
        @click="$store.trays[trayId] = true"
        aria-controls="tray-{{ id }}" :aria-expanded="$store.trays[trayId]">
    {% if icon %}<span aria-hidden="true">{{ icon | icon }}</span>{% endif %}
    {{ label }}
</button>
{% end %}

{% def tray(id, title, position="right", persist_open=false, cls="") %}
<div class="chirpui-tray chirpui-tray--{{ position }} chirpui-tray--closed{{ " " ~ cls if cls else "" }}" id="tray-{{ id }}"
     data-tray-id="{{ id }}"
     :class="{ 'chirpui-tray--closed': !$store.trays[trayId], 'chirpui-tray--open': $store.trays[trayId] }"
     role="dialog" aria-modal="true"
     aria-labelledby="tray-{{ id }}-title"
     aria-hidden="true"
     :aria-hidden="!$store.trays[trayId]"
     x-data="chirpuiTray({ persistOpen: {{ 'true' if persist_open else 'false' }} })"
     x-init="init()">
    <div class="chirpui-tray__backdrop" @click="close()"></div>
    <div class="chirpui-tray__panel" x-trap.inert.noscroll="$store.trays[trayId]">
        <header class="chirpui-tray__header">
            <h2 class="chirpui-tray__title" id="tray-{{ id }}-title">{{ title }}</h2>
            <button type="button" class="chirpui-tray__close"
                    @click="close()"
                    aria-label="Close">×</button>
        </header>
        <div class="chirpui-tray__body">
            {% slot %}
        </div>
    </div>
</div>
{% end %}