@{
    ViewData["Title"] = "Set Up Two-Factor Authentication";
}

<div class="container py-4" style="max-width:600px">
    <h4 class="mb-1"><i class="bi bi-shield-lock me-2 text-primary"></i>Set Up Two-Factor Authentication</h4>
    <p class="text-muted mb-4">Scan the QR code below with your authenticator app, then enter the 6-digit code to confirm.</p>

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

    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <ol class="mb-0 ps-3">
                <li class="mb-3">
                    <strong>Install an authenticator app</strong> on your phone if you haven't already &mdash;
                    <em>Google Authenticator</em>, <em>Microsoft Authenticator</em>, or <em>Authy</em> all work.
                </li>
                <li class="mb-3">
                    <strong>Scan this QR code</strong> with your app, or enter the key manually.
                    <div class="text-center my-3">
                        <img src="data:image/png;base64,@ViewBag.QrCodeBase64"
                             alt="QR code for authenticator app"
                             class="border rounded p-1"
                             style="width:200px;height:200px" />
                    </div>
                    <div class="alert alert-light alert-permanent py-2 small">
                        <strong>Manual entry key:</strong><br>
                        <code class="user-select-all">@ViewBag.SharedKey</code>
                    </div>
                </li>
                <li>
                    <strong>Enter the 6-digit code</strong> from your app below to complete setup.
                </li>
            </ol>
        </div>
    </div>

    <form method="post" asp-action="Setup">
        @Html.AntiForgeryToken()
        <div class="mb-3">
            <label class="form-label fw-semibold">Verification Code</label>
            <input type="text" name="verificationCode" class="form-control form-control-lg text-center fw-bold"
                   placeholder="000000" maxlength="7" inputmode="numeric"
                   autocomplete="one-time-code" autofocus
                   style="letter-spacing:0.3em;max-width:200px" />
            <div class="form-text">Enter the 6-digit code shown in your authenticator app.</div>
        </div>
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg me-1"></i>Verify &amp; Enable
            </button>
            <a asp-action="Index" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>
</div>