autoclose alert messages after 5 seconds

src/servala/frontend/templates/includes/message.html

@@ -1,7 +1,28 @@
-<div class="alert alert-{{ message.tags }} alert-dismissible">
+<div class="alert alert-{{ message.tags }} alert-dismissible" id="auto-dismiss-alert-{{ forloop.counter0|default:'0' }}">
     {{ message }}
     <button type="button"
             class="btn-close"
             data-bs-dismiss="alert"
             aria-label="Close"></button>
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const alert = document.getElementById('auto-dismiss-alert-{{ forloop.counter0|default:'0' }}');
+    if (alert) {
+        setTimeout(function() {
+            let opacity = 1;
+            const fadeOutInterval = setInterval(function() {
+                if (opacity > 0.05) {
+                    opacity -= 0.05;
+                    alert.style.opacity = opacity;
+                } else {
+                    clearInterval(fadeOutInterval);
+                    const bsAlert = new bootstrap.Alert(alert);
+                    bsAlert.close();
+                }
+            }, 25);
+        }, 5000);
+    }
+});
+</script>