{# app/Views/components/alerts.twig #}

{% set alerts = get_alerts() %}

{% if alerts is not empty %}
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1050">
    {% for alert in alerts %}
        {# Преобразуем наш тип 'error' в класс Bootstrap 'danger' #}
        {% set bs_type = alert.type == 'error' ? 'danger' : alert.type %}
        
        <div class="toast align-items-center text-white bg-{{ bs_type }} border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    {{ alert.message }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    {% endfor %}
</div>

<script>
    // Автоматически показываем все toasts при загрузке страницы
    document.addEventListener("DOMContentLoaded", function() {
        var toastElList = [].slice.call(document.querySelectorAll('.toast'));
        toastElList.forEach(function(toastEl) {
            var toast = new bootstrap.Toast(toastEl);
            toast.show();
        });
    });
</script>
{% endif %}