@using Newtonsoft.Json.Linq
@model (Fido2NetLib.CredentialCreateOptions, bool IsPasskey)
@{
    var pageTitle = Model.IsPasskey ? StringLocalizer["Register your passkey"] : StringLocalizer["Register your security device"];
    ViewData.SetLayoutModel(new(Model.IsPasskey ? nameof(ManageNavPages.Passkeys) : nameof(ManageNavPages.TwoFactorAuthentication), pageTitle));
    ViewData.SetBreadcrumbs([
        Model.IsPasskey
            ? new(StringLocalizer["Passkeys"], Action: nameof(BTCPayServer.Controllers.UIManageController.Passkeys), Controller: nameof(BTCPayServer.Controllers.UIManageController))
            : new(StringLocalizer["Two Factor Authentication"], Action: nameof(BTCPayServer.Controllers.UIManageController.TwoFactorAuthentication), Controller: nameof(BTCPayServer.Controllers.UIManageController)),
        new(Model.IsPasskey ? StringLocalizer["Register Passkey"] : StringLocalizer["Register Device"], Active: true)
    ]);
}

<div class="sticky-header">
    <vc:title-header />
</div>
<partial name="_StatusMessage" />

@if (Model.IsPasskey)
{
    <div class="alert alert-info mb-3">
        <strong text-translate="true">What is a passkey?</strong>
        <p class="mb-0" text-translate="true">Passkeys let you sign in without a password using biometrics (fingerprint, face recognition) or your device's screen lock. Once registered, you can use your passkey instead of entering your email and password.</p>
    </div>
    <p text-translate="true">Use your fingerprint, face recognition, or security key to register a new passkey.</p>
}
else
{
    <p text-translate="true">Insert your security device and proceed.</p>
}

<form asp-controller="UIFido2" asp-action="CreateResponse" method="post" id="registerForm">
    <input type="hidden" name="data" id="data"/>
    <input type="hidden" name="name" id="name" value="@(ViewData.ContainsKey("CredentialName") ? ViewData["CredentialName"] : string.Empty)"/>
    <input type="hidden" name="isPasskey" id="isPasskey" value="@(Model.IsPasskey ? "true" : "false")"/>
</form>
<div class="row">
    <div class="col-xl-8">
        <div id="info-message" class="alert alert-info mb-3 d-none">
            <div class="d-flex align-items-center">
                <div class="spinner-border spinner-border-sm me-2 fido-running" role="status">
                    <span class="visually-hidden" text-translate="true">Loading...</span>
                </div>
                <span text-translate="true">If your security device has a button, tap on it.</span>
            </div>
        </div>
        <button id="btn-start" class="btn btn-primary d-none" type="button" text-translate="true">Start</button>
        <p id="error-message" class="d-none alert alert-danger"></p>
        <a id="btn-retry" class="btn btn-secondary d-none" text-translate="true">Retry</a>
    </div>
</div>

@section PageFootContent {
    <script>
        document.getElementById('btn-retry').addEventListener('click', function () { window.location.reload() });
        // send to server for registering
        window.makeCredentialOptions = @Json.Serialize(JToken.Parse(Model.Item1.ToJson()));
    </script>
    <script src="~/js/webauthn/helpers.js"></script>
    <script src="~/js/webauthn/register.js"></script>
}