@{
    Layout = null;
}

<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Two-factor authentication</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .form-control {
            background-color: #212529 !important;
            color: white !important;
            border: 1px solid #6c757d;
            letter-spacing: 0.35rem;
            text-align: center;
            font-size: 1.4rem;
        }

            .form-control:focus {
                border-color: #0d6efd !important;
                box-shadow: 0 0 5px rgba(13, 110, 253, 0.5);
            }
    </style>
</head>
<body class="bg-dark d-flex align-items-center justify-content-center vh-100">
    <main class="w-100" style="max-width: 400px;">
        @using (Html.BeginForm("Verify", "login", FormMethod.Post))
        {
            @Html.AntiForgeryToken()
            <h1 class="h3 mb-2 fw-normal text-white text-center">Two-factor authentication</h1>
            <p class="text-white-50 text-center mb-3">Enter the 6-digit code from your authenticator app.</p>

            if (ViewBag.Error != null)
            {
                <div class="alert alert-danger py-2">@ViewBag.Error</div>
            }

            <div class="mb-3">
                <input type="text" name="code" class="form-control" maxlength="6" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" autofocus required />
            </div>

            <button class="btn btn-primary w-100 py-2" type="submit">Verify</button>
            <a href="@Url.Action("Index", "login")" class="btn btn-link text-white-50 w-100 mt-2">Back to sign in</a>
        }
    </main>
</body>
</html>
