{% load static i18n insight_tags %}

<div
    {% if modal_config.tag_id %}id="{{ modal_config.tag_id }}"{% endif %}
    role="dialog"
    aria-modal="true"
    aria-labelledby="{{ modal_config.tag_id }}-title"
    {% if description %}aria-describedby="{{ modal_config.tag_id }}-description"{% endif %}
    tabindex="-1"
    class="hidden fixed inset-0 z-50 overflow-y-auto"
>
    {# Modal Backdrop #}
    <div class="fixed inset-0 bg-black/50 transition-opacity dark:bg-gray-800/50 {# tw-token-ok: only needed for backdrop #}" data-insight-dismiss="modal"></div>

    {# Wrapper to centralize the modal on screen #}
    <div class="flex justify-center items-center p-4 min-h-screen">
        {# Modal #}
        <div class="relative mx-auto w-full bg-insight-base rounded-insight-overlay shadow-insight-overlay transition-all transform", style="max-width: {{ modal_config.width|default:32 }}rem;">
            {# Modal Header #}
            <div class="flex justify-between items-start p-6 h-fit border-b border-insight-divider">
                <h2 id="{{ modal_config.tag_id }}-title" class="pb-0">{{ modal_config.title }}</h2>
                {% button label=_("Close") type="secondary" subtle=True icon_name="x-mark" icon_size="xs" icon_only=True data_insight_dismiss="modal" %}
            </div>

            {# Modal Body #}
            <div id="{{ modal_config.tag_id }}-description" class="p-6 space-y-4">
                {% block modal_content %}
                    <div class="space-y-4">
                        {% for paragraph in modal_config.description %}
                            <p class="flex items-center text-insight-body">{{ paragraph }}</p>
                        {% endfor %}
                    </div>
                {% endblock %}
            </div>

            {# Modal Footer #}
            <div class="flex gap-2 justify-end p-6 border-t border-insight-divider">
                {% if modal_config.actions %}
                    {% for action in modal_config.actions %}
                        {% button config=action %}
                    {% endfor %}
                {% else %}
                    {# Default close button #}
                    {% button label=_("Close") type="secondary" data_insight_dismiss="modal" %}
                {% endif %}
            </div>
        </div>
    </div>
</div>