<div class="main-content">
    <div class="d-flex align-items-center justify-content-center min-vh-100 bg-light">
        <div class="card shadow-sm border-0 text-center p-4 p-md-5 error-card">
            <div class="mb-3">
                <i class="bi bi-exclamation-triangle-fill display-3 text-warning"></i>
            </div>
            <h1 class="h3 mb-3">404 - Page Not Found</h1>
            <p class="text-muted mb-3">
                The page you’re looking for could not be found. It may have been moved, deleted,
                or the address might be incorrect.
            </p>
            <%
            Dim redirectSeconds : redirectSeconds = GetAppSetting("Error404RedirectSeconds")
            If redirectSeconds = "nothing" Or Not IsNumeric(redirectSeconds) Then redirectSeconds = 5
            %>
            <p class="text-muted mb-3">
                You'll be redirected to the homepage in
                <span id="countdown"><%= redirectSeconds %></span> seconds.
            </p>
            <a href="/" class="btn btn-primary mt-2">
                Go to Homepage Now
            </a>
        </div>
    </div>
</div>

<style>
    .error-card {
        max-width: 540px;
        border-radius: 1rem;
    }

    .error-card .bi {
        line-height: 1;
    }
</style>

<script>
    (function () {
        let seconds = <%= redirectSeconds %>;
        const countdown = document.getElementById('countdown');

        const timer = setInterval(function () {
            seconds--;
            if (countdown) {
                countdown.textContent = seconds;
            }

            if (seconds <= 0) {
                clearInterval(timer);
                window.location.href = '/';
            }
        }, 1000);
    })();
</script>