{#- chirp-ui: Modal component
    Dialog-based modal using native <dialog> element.

    Usage:
        from "chirpui/modal.html" import modal, modal_trigger

        modal_trigger("my-modal", label="Open Settings")

        call modal("my-modal", title="Settings")
            <p>Modal body content.</p>
            {% fill footer %}
                <button class="chirpui-btn chirpui-btn--ghost" onclick="this.closest('dialog').close()">Cancel</button>
                <button class="chirpui-btn chirpui-btn--primary">Save</button>
            {% end %}
        end
-#}

{% def modal(id, title=none, size="medium", cls="") %}
{% set size = size | validate_size("modal", "medium") %}
<dialog id="{{ id }}" class="chirpui-modal chirpui-modal--{{ size }}{{ " " ~ cls if cls else "" }}"
        closedby="any">
    {% if title %}
        <header class="chirpui-modal__header">
            <h2 class="chirpui-modal__title">{{ title }}</h2>
            <div class="chirpui-modal__header-actions">{% slot header_actions %}</div>
            <form method="dialog">
                <button class="chirpui-modal__close" aria-label="Close">&times;</button>
            </form>
        </header>
    {% end %}
    <div class="chirpui-modal__body">
        {% slot %}
    </div>
    <footer class="chirpui-modal__footer">
        {% slot footer %}
    </footer>
</dialog>
{% end %}

{% def modal_trigger(target, label="Open", cls="") %}
<button class="chirpui-modal-trigger{{ " " ~ cls if cls else "" }}"
        type="button"
        x-data
        @click="document.getElementById('{{ target }}')?.showModal()">
    {{ label }}
</button>
{% end %}