{% load i18n %}
{% if messages %}
<div class="mb-6 space-y-3">
    {% for message in messages %}
    <div class="{% if message.tags == 'error' or message.tags == 'danger' %}bg-red-50 border-red-200 text-red-700{% elif message.tags == 'warning' %}bg-amber-50 border-amber-200 text-amber-700{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-700{% else %}bg-blue-50 border-blue-200 text-blue-700{% endif %} border rounded-2xl px-5 py-4 flex items-start gap-3 shadow-sm" role="alert">
        {% if message.tags == 'error' or message.tags == 'danger' %}
            <div class="bg-red-100 p-1.5 rounded-lg flex-shrink-0 mt-0.5">
                <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
            </div>
        {% elif message.tags == 'warning' %}
            <div class="bg-amber-100 p-1.5 rounded-lg flex-shrink-0 mt-0.5">
                <i data-lucide="alert-circle" class="w-5 h-5 text-amber-600"></i>
            </div>
        {% elif message.tags == 'success' %}
            <div class="bg-green-100 p-1.5 rounded-lg flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
            </div>
        {% else %}
            <div class="bg-blue-100 p-1.5 rounded-lg flex-shrink-0 mt-0.5">
                <i data-lucide="info" class="w-5 h-5 text-blue-600"></i>
            </div>
        {% endif %}
        <div class="flex-1">
            <p class="font-medium text-sm">{{ message }}</p>
        </div>
        <button type="button" onclick="this.parentElement.remove()" class="flex-shrink-0 text-current/60 hover:text-current transition p-1 hover:bg-black/5 rounded-lg">
            <i data-lucide="x" class="w-5 h-5"></i>
        </button>
    </div>
    {% endfor %}
</div>
{% endif %}

<script>
// Auto-hide success messages after 5 seconds
document.addEventListener('DOMContentLoaded', function() {
    const messages = document.querySelectorAll('[role="alert"]');
    messages.forEach(message => {
        const isSuccess = message.classList.contains('bg-green-50');
        if (isSuccess) {
            setTimeout(function() {
                message.style.opacity = '0';
                message.style.transform = 'translateX(100%)';
                message.style.transition = 'all 0.3s ease-in';
                setTimeout(function() {
                    message.remove();
                }, 300);
            }, 5000);
        }
    });
});
</script>