@model Fido2NetLib.CredentialCreateOptions
@{
    ViewData.SetActivePage(ManageNavPages.TwoFactorAuthentication, "Register your security device");
}

<h3 class="mb-3">@ViewData["Title"]</h3>

<p>Insert your security device and proceed.</p>

<form asp-action="CreateResponse" id="registerForm">
    <input type="hidden" name="data" id="data"/>
    <input type="hidden" name="name" id="name" value="@(ViewData.ContainsKey("CredentialName") ? ViewData["CredentialName"] : string.Empty)"/>
</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">
                <span id="spinner" class="fa fa-spinner fa-spin me-3 fido-running" style="font-size:1.5rem"></span>
                <span>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">Start</button>
        <p id="error-message" class="d-none alert alert-danger"></p>
        <a id="btn-retry" class="btn btn-secondary d-none">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(Model);
    </script>
    <script src="~/js/webauthn/helpers.js"></script>
    <script src="~/js/webauthn/register.js"></script>
}