{% comment %}
Component: Modal (<dialog>)
Accessible native dialog modal.
Props:
  id: Unique DOM id
  title: Modal title
  size: sm | md | lg (default: md)
  dismissible: boolean (default: true)
{% endcomment %}
<dialog id="{{ id }}"
        aria-labelledby="{{ id }}_title"
        {% if initial_focus %}data-initial-focus="{{ initial_focus }}"{% endif %}
        {% if not dismissible %}data-dismissible="false" @cancel.prevent{% endif %}
        x-data="{
            prevActive: null,
            init() {
                const d = this.$el;
                const self = this;
                const origShowModal = d.showModal;
                if (typeof origShowModal === 'function') {
                    d.showModal = function() {
                        self.prevActive = document.activeElement;
                        origShowModal.call(d);
                        self.applyFocus();
                    };
                }
                const origShow = d.show;
                if (typeof origShow === 'function') {
                    d.show = function() {
                        self.prevActive = document.activeElement;
                        origShow.call(d);
                        self.applyFocus();
                    };
                }
            },
            applyFocus() {
                const sel = this.$el.dataset.initialFocus;
                if (!sel) return;
                let target = null;
                try {
                    target = this.$el.querySelector(sel);
                    if (!target) {
                        const candidate = document.querySelector(sel);
                        if (candidate && this.$el.contains(candidate)) {
                            target = candidate;
                        }
                    }
                } catch (err) {
                    target = null;
                }
                if (target && typeof target.focus === 'function') {
                    target.focus();
                }
            },
            restoreFocus() {
                if (this.prevActive && typeof this.prevActive.focus === 'function') {
                    try {
                        this.prevActive.focus();
                    } catch (err) {
                        this.prevActive = null;
                    }
                }
                this.prevActive = null;
            }
        }"
        @close="restoreFocus()"
        class="c-dialog rounded-lg bg-surface text-text border border-border shadow-overlay p-6 backdrop:bg-scrim w-full {% if size == 'sm' %}max-w-md{% elif size == 'lg' %}max-w-2xl{% else %}max-w-lg{% endif %}">
    <div class="flex items-center justify-between mb-4 border-b border-border pb-3">
        <h3 id="{{ id }}_title" class="text-base font-semibold text-text">{{ title }}</h3>
        {% if dismissible %}
        <button type="button"
                @click="$el.closest('dialog').close()"
                aria-label="Fechar"
                class="p-1 rounded-md text-subtle hover:text-text hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
        {% endif %}
    </div>
    <div class="c-dialog__content mb-6">
        {{ content|default:"" }}
    </div>
</dialog>