<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 && !alert.classList.contains('alert-danger')) {
            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>
