{% load i18n %}

<div id="{{ modal_id }}" x-data="{close() {$refs.modal.remove()} }" x-ref="modal" class="modal is-active"
     {% if blocking %}
        hx-indicator="#{{ modal_id }}-indicator"
        hx-disabled-elt="#{{ modal_id }}-background"
     {% endif %}
>
    <button id="{{ modal_id }}-background" class="modal-background" @click="$refs.modal.remove()" style="cursor: default"></button>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">
                {{ title }}
            </p>
            <button class="delete" aria-label="close" @click="$refs.modal.remove()"></button>
        </header>
        <section class="modal-card-body">
            {% block modal_content %}{% endblock %}
        </section>
        <footer class="modal-card-foot">
            {% block modal_footer %}
                <div class="buttons" style="width: 100%">
                    {% block modal_buttons %}
                    {% endblock %}
                </div>
            {% endblock %}
        </footer>
        {% if blocking %}
            <div id="{{ modal_id }}-indicator" class="htmx-indicator modal-request-overlay" style="position: absolute; inset: 0; background: rgba(47, 47, 62, 0.2)">
                <progress class="progress is-success" max="100" style="position: absolute; inset: 0; width: 50%; margin-top: 25%; margin-left: 25%"></progress>
            </div>
        {% endif %}
    </div>
</div>