{% if messages %}
    {% for msg in messages %}
        <div class="alert alert-{{ msg.tags }} alert-dismissible fade show" role="alert" 
             style="border-radius: 15px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); padding: 20px; background-color: rgba(255, 255, 255, 0.9); margin-bottom: 20px; position: relative;">
            <div class="d-flex align-items-center">
                <strong class="mr-2" style="font-size: 1.2em; color: #495057;">
                    {% if msg.tags == 'success' %}
                        <i class="bi bi-check-circle-fill" style="color: #28a745;"></i> عملیات موفق!
                    {% elif msg.tags == 'error' %}
                        <i class="bi bi-x-circle-fill" style="color: #dc3545;"></i> خطا!
                    {% elif msg.tags == 'warning' %}
                        <i class="bi bi-exclamation-triangle-fill" style="color: #ffc107;"></i>احسنت!
                    {% else %}
                        <i class="bi bi-info-circle-fill" style="color: #17a2b8;"></i> تبریک!
                    {% endif %}
                </strong>
                <p class="mb-0" style="flex-grow: 1; font-size: 1.1em; color: #212529;">{{ msg }}</p>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="font-size: 1.5em; color: #495057; opacity: 0.8;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    {% endfor %}
{% endif %}


<style>
    /* انیمیشن ورود از سمت راست */
    @keyframes slideIn {
        0% {
            transform: translateX(100%); /* شروع از بیرون صفحه */
        }
        100% {
            transform: translateX(0); /* در موقعیت نهایی خود قرار می‌گیرد */
        }
    }

    /* انیمیشن خروج به سمت راست */
    @keyframes slideOut {
        0% {
            transform: translateX(0); /* شروع از موقعیت اصلی */
        }
        100% {
            transform: translateX(-100%); /* حرکت به سمت راست برای خروج */
        }
    }

    /* وقتی پیام نمایش داده می‌شود، انیمیشن ورود اجرا می‌شود */
    .alert {
        animation: slideIn 0.5s ease-out forwards;
    }

    /* وقتی پیام باید بسته شود (2 ثانیه بعد) */
    .alert.hide {
        animation: slideOut 0.5s ease-out forwards;
    }

    .alert-dismissible .close {
        cursor: pointer;
    }
</style>

<script>
    // 2 ثانیه بعد از نمایش، پیام‌ها را مخفی می‌کنیم
    setTimeout(function() {
        const alerts = document.querySelectorAll('.alert');
        alerts.forEach(function(alert) {
            alert.classList.add('hide');  // اضافه کردن کلاس hide برای شروع انیمیشن خروج
            setTimeout(function() {
                alert.remove();  // بعد از پایان انیمیشن، پیام را از DOM حذف می‌کنیم
            }, 500); // 500 میلی‌ثانیه که زمان انیمیشن خروج است
        });
    }, 5000); // 2000 میلی‌ثانیه = 2 ثانیه
</script>