@if (TempData["SuccessMessage"] != null)
{
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        @TempData["SuccessMessage"]
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
}

@if (TempData["ErrorMessage"] != null)
{
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        @TempData["ErrorMessage"]
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
}

@if (TempData["WarningMessage"] != null)
{
    <div class="alert alert-warning alert-dismissible fade show" role="alert" data-no-autodismiss="true">
        @TempData["WarningMessage"]
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        setTimeout(function () {
            // Auto-dismiss transient alerts, but keep ones that need the user's attention.
            var alerts = document.querySelectorAll('.alert:not([data-no-autodismiss])');
            alerts.forEach(function (alert) {
                var bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
    });
</script>