{% comment %}
Переиспользуемый компонент для отображения сообщений Django
Использование:
    {% include 'mainapp/components/_messages.html' %}
{% endcomment %}

{% if messages %}
<div class="messages-container">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show auto-dismiss" role="alert">
        {% if message.tags == 'error' %}
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
        {% elif message.tags == 'success' %}
            <i class="bi bi-check-circle-fill me-2"></i>
        {% elif message.tags == 'warning' %}
            <i class="bi bi-exclamation-circle-fill me-2"></i>
        {% elif message.tags == 'info' %}
            <i class="bi bi-info-circle-fill me-2"></i>
        {% endif %}
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
</div>

<script>
// Автоматическое скрытие уведомлений через 5 секунд
document.addEventListener('DOMContentLoaded', function() {
    const alerts = document.querySelectorAll('.alert.auto-dismiss');
    alerts.forEach(function(alert) {
        setTimeout(function() {
            const bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }, 5000);
    });
});
</script>
{% endif %}
