{% load css_tags %}{% block_css 'enap_designsystem/blocks/alerts.css' %}
{% load wagtailcore_tags %}
{% load static %}


<div class="alert-component">

<div class="alert-modal" id="alert-modal-{{ id }}">
    <div class="alert-modal-content">
        <div class="alert-box {{ page.alert.alert_type }}">
            <span class="material-symbols-outlined {{ page.alert.alert_type }}">
                {% if page.alert.alert_type == 'success' %}
                    check_circle
                {% elif page.alert.alert_type == 'error' %}
                    error
                {% elif page.alert.alert_type == 'warning' %}
                    warning
                {% else %}
                    info
                {% endif %}
            </span>
            
            
        
        {% if page.alert.message %}
            <div style="font-size: 16px;">{{ page.alert.message|richtext }}</div>
        {% endif %}
        </div>

        {% if page.alert.button_text %}
                <button id="close-alert-{{ id }}" class="alert-button">{{ page.alert.button_text }}</button>
            {% endif %}
    </div>
</div>
    
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var alertModal = document.getElementById('alert-modal-{{ id }}');
        
        // Exibir o modal automaticamente
        alertModal.style.display = 'flex';
        
        {% if page.alert.button_text %}
            // Configurar o evento para fechar o modal ao clicar no botão
            var closeButton = document.getElementById('close-alert-{{ id }}');
            if (closeButton) {
                closeButton.onclick = function() {
                    alertModal.style.display = 'none';
                };
            }
        {% endif %}
        
        // Fechar o modal ao clicar fora dele
        alertModal.addEventListener('click', function(event) {
            // Verifica se o clique foi diretamente no modal (fora do conteúdo)
            if (event.target.classList.contains('alert-modal')) {
                alertModal.style.display = 'none';
            }
        });
    });
    </script>
</div>