<div
    class="{% block x-data_class %}{% endblock %}"
    x-data="{
        show_modal: false,
        eventData: {},

        setUp(event) {
            this.dispatch_modal(event.detail.html_content);
            this.eventData = event.detail.eventData;
        },

        close_modal() {
            this.show_modal = false;
        },
        open_modal() {
            this.show_modal = true;
        },
        dispatch_modal(html_content) {
            document.getElementById('dispatch-modal-content').innerHTML = html_content
            this.open_modal()
        }
    }"
>
    {% block modal_trigger_wrapper %}
        {# Trigger #}
        <div
            class="{% block modal_trigger_class %}{% endblock %}"
            @click="open_modal()"
        >
            {% block modal_trigger %}
            {% endblock %}
        </div>
    {% endblock %}

    {#  Modal  #}
    <template x-teleport="body">
        <div
            x-show="show_modal"
            x-cloak
            role="dialog"
            aria-modal="true"
            x-id="['modal-title']"
            :aria-labelledby="$id('modal-title')"
            class="position-fixed overflow-auto"
            style="z-index: 1024; inset: 0"
        >
            {# Overlay #}
            <div x-show="show_modal" x-transition.opacity style="inset: 0; background-color: rgba(0, 0, 0, 0.5);" class="position-fixed"></div>

            {#   Panel  #}
            <div
                class="vh-100 position-relative d-flex justify-content-center"
                x-transition
                x-show="show_modal"
            >
                <div
                    class="row w-100 justify-content-center {% block modal_class %}pt-md-6 pt-3{% endblock %}"
                    x-trap.noscroll.inert="show_modal"
                >
                    <div class="{% block modal_col %}col-xl-8 col-lg-10 col-md-11 col-12{% endblock %}">
                        <div
                            class="bg-app-layer-one card shadow-lg p-3 {% block modal_content_class %}{% endblock %}"
                            {% block modal_content_attributes %}{% endblock %}
                            @mousedown.outside="close_modal()"
                        >
                            {% block modal_content %}
                            {% endblock %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>
