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

    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
        @click="$store.trays['{{ id }}'] = true"
        aria-controls="tray-{{ id }}" :aria-expanded="$store.trays['{{ id }}']">
    {% if icon %}<span aria-hidden="true">{{ icon | icon }}</span>{% endif %}
    {{ label }}
</button>
{% end %}

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