{# Alert widget template #}
<div class="{{ widget.css_classes }}" id="{{ widget.widget_id }}" role="alert">
    {% if icon %}
        <i class="fas fa-{{ widget.icon }} me-2"></i>
    {% endif %}

    {% if widget.title %}
        <h6 class="alert-heading">{{ widget.widget.title }}</h6>
    {% endif %}

    <div>{{ widget.message | safe }}</div>

    {% if dismissible %}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    {% endif %}
</div>

{% if auto_dismiss %}
    <script>
        setTimeout(function () {
            var alert = document.getElementById('{{ widget.widget_id }}');
            if (alert) {
                var bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, {{ widget.auto_dismiss * 1000 }});
    </script>
{% endif %}
