52 lines
2.4 KiB
HTML
52 lines
2.4 KiB
HTML
{% 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> |