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

Для отключения автоскрытия добавьте extra_tags='persistent':
    messages.success(request, "Сообщение", extra_tags='persistent')
{% endcomment %}

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

<script>
// Автоматическое скрытие уведомлений через 5 секунд (кроме persistent)
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 %}
