@model GenerateRecoveryCodesViewModel
@{
    ViewData.SetLayoutModel(new LayoutModel(nameof(ManageNavPages.TwoFactorAuthentication), StringLocalizer["Recovery codes"])
        .SetCategory(nameof(ManageNavPages)));
}

<h2 class="mb-2 mb-lg-3">@ViewData["Title"]</h2>
<partial name="_StatusMessage" />

<div class="alert alert-warning" role="alert">
    <h5>
        <vc:icon symbol="warning" />
        <span text-translate="true">Put these codes in a safe place</span>
    </h5>
    <p class="mb-0" text-translate="true">
        If you lose your device and don't have the recovery codes you will lose access to your account.
    </p>
</div>
<div class="row">
    <div class="col-md-12">
        @for(var row = 0; row < Model.RecoveryCodes.Length; row += 2)
        {
            <code>@Model.RecoveryCodes[row]</code><text>&nbsp;</text><code>@Model.RecoveryCodes[row + 1]</code><br />
        }
    </div>
</div>
<div class="row mt-4">
     <div class="col-md-12">
        <a asp-action="TwoFactorAuthentication" class="btn btn-primary" text-translate="true">I wrote down my recovery codes</a>
    </div>
</div>