<div
    x-data="{
        show_modal: false,

        open_modal(event) {
            if (event.detail && event.detail.modal_id === this.modal_id) {
                this.show_modal = true;
            }
        },

        close_modal() {
            this.show_modal = false;
        }
    }"
    @open-modal.window="open_modal($event)"
    @keydown.escape.window="close_modal()"
    class="modal fade modal-overlay"
    :class="{ 'show': show_modal }"
    :style="{ display: show_modal ? 'block' : 'none' }"
    tabindex="-1"
>
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content shadow-lg">
            <div class="modal-header d-flex align-items-center justify-content-between px-3" style="height: 60px;">
                {% block modal_header %}
                    <h5 class="fw-normal mb-0" style="line-height: 1;">{% block modal_title %}{% endblock %}</h5>
                {% endblock %}

                {% block modal_close_button %}
                    <button type="button" class="btn-close" @click="close_modal()" style="align-self: center;"></button>
                {% endblock %}
            </div>

            <div class="modal-body">
                {% block modal_body %}
                {% endblock %}
            </div>

            {% block modal_footer %}
            {% endblock %}
        </div>
    </div>
</div>
