{% load django_spire_string_formatting %}

{% load django_spire_core %}

{% with modal_camel_case_id=modal_id|to_camel_case_javascript_safe %}

    <div x-data>

        <div data-bs-toggle="modal" data-bs-target="#{{ modal_camel_case_id }}Modal">
            {% block modal_trigger %}
            {% endblock %}
        </div>

        <template x-teleport="body">
            <div
                    class="modal fade {% block modal_class %}{% endblock %} {{ modal_class }}"
                    id="{{ modal_camel_case_id }}Modal"
                    tabindex="-1"
                    x-init="
                        $el.addEventListener('show.bs.modal', () => $el.removeAttribute('inert'));
                        $el.addEventListener('hide.bs.modal', () => $el.setAttribute('inert', ''));
                    "
            >
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        {% block modal_content %}
                            <div class="modal-body">
                                {% block modal_body %}
                                {% endblock %}
                            </div>
                        {% endblock %}
                    </div>
                </div>
            </div>
        </template>

    </div>

{% endwith %}