{#- chirp-ui: Modal overlay (div-based, for apps that prefer overlay over native dialog)
    Use modal_trigger to open, modal for content. Requires Alpine.js (Alpine.store('modals')).

    Usage:
        from "chirpui/modal_overlay.html" import modal_overlay, modal_overlay_trigger

        {{ modal_overlay_trigger("confirm", "Delete", variant="danger") }}
        {% call modal_overlay("confirm", "Confirm delete") %}
            <p>Are you sure?</p>
        {% end %}
-#}

{% def modal_overlay_trigger(id, label, variant="default", icon=none) %}
<button type="button" class="chirpui-btn chirpui-btn--{{ variant }} chirpui-btn--sm"
        x-data
        @click="$store.modals['{{ id }}'] = true"
        aria-controls="modal-{{ id }}" :aria-expanded="$store.modals['{{ id }}']">
    {% if icon %}<span aria-hidden="true">{{ icon }}</span>{% endif %}
    {{ label }}
</button>
{% end %}

{% def modal_overlay(id, title) %}
<div class="chirpui-modal" id="modal-{{ id }}"
     :class="{ 'chirpui-modal--closed': !$store.modals['{{ id }}'], 'chirpui-modal--open': $store.modals['{{ id }}'] }"
     role="dialog" aria-modal="true"
     aria-labelledby="modal-{{ id }}-title"
     :aria-hidden="!$store.modals['{{ id }}']"
     x-data>
    <div class="chirpui-modal__backdrop" @click="$store.modals['{{ id }}'] = false; $dispatch('chirpui:modal-closed', { id: '{{ id }}' })"></div>
    <div class="chirpui-modal__panel" x-trap.inert.noscroll="$store.modals['{{ id }}']">
        <header class="chirpui-modal__header">
            <h2 class="chirpui-modal__title" id="modal-{{ id }}-title">{{ title }}</h2>
            <button type="button" class="chirpui-modal__close"
                    @click="$store.modals['{{ id }}'] = false; $dispatch('chirpui:modal-closed', { id: '{{ id }}' })"
                    aria-label="Close">×</button>
        </header>
        <div class="chirpui-modal__body">
            {% slot %}
        </div>
    </div>
</div>
{% end %}