@inject IViewLocalizer Localizer
@using Microsoft.AspNetCore.Mvc.Localization
@model LiteCharmsSecurity.STS.Identity.ViewModels.Manage.EnableAuthenticatorViewModel
@{
    ViewData["Title"] = Localizer["Title"];
}

<section class="space-y-6">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">@ViewData["Title"]</h2>
            <p class="card-description">@Localizer["SubTitle"]</p>
        </div>

        <div class="card-content space-y-6">
            <ol class="space-y-6 list-decimal pl-5 text-sm text-muted-foreground">
                <li class="space-y-2">
                    <p class="text-foreground">
                        @Localizer["DownloadTitle"]
                        <a href="https://go.microsoft.com/fwlink/?Linkid=825071" class="text-primary hover:underline">Windows Phone</a>,
                        <a href="https://go.microsoft.com/fwlink/?Linkid=825072" class="text-primary hover:underline">Android</a>,
                        <a href="https://go.microsoft.com/fwlink/?Linkid=825073" class="text-primary hover:underline">iOS</a>.
                        @Localizer["GoogleAuthenticatorTitle"]
                        <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en" class="text-primary hover:underline">Android</a>,
                        <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8" class="text-primary hover:underline">iOS</a>.
                    </p>
                </li>

                <li class="space-y-3">
                    <p class="text-foreground">@Localizer["ScanQR"] <kbd class="rounded bg-muted px-1 py-0.5 text-xs">@Model.SharedKey</kbd> @Localizer["ScanQRSubTitle"]</p>
                    <div id="qrCode" class="rounded-md border p-4 inline-block"></div>
                    <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
                </li>

                <li class="space-y-3">
                    <p class="text-foreground">@Localizer["Info"]</p>
                    <form method="post" class="space-y-4 max-w-md">
                        @await Html.PartialAsync("_ValidationSummary")
                        <div class="form-item">
                            <label asp-for="Code" class="form-label">
                                <lucideicon name="shield-check" class="inline-block h-4 w-4 mr-1" />
                                @Localizer["Code"]
                            </label>
                            <input asp-for="Code" class="input" autocomplete="off" tw-validation />
                            <span asp-validation-for="Code" class="form-message"></span>
                        </div>
                        <button type="submit" class="btn-default">
                            <lucideicon name="check" class="inline-block h-4 w-4 mr-2" />
                            @Localizer["Verify"]
                        </button>
                    </form>
                </li>
            </ol>
        </div>
    </div>
</section>

<script src="~/js/qrcode.min.js"></script>
<script src="~/js/enable-authenticator.js" asp-append-version="true"></script>
