<div class="passkey-setup" x-data="webauthnRegister()">
  <p class="webauthn-setup-description">
    A passwordless way to sign in using your device's biometric authentication or PIN.
  </p>

  <div x-show="!browserSupported" x-cloak class="alert alert-warning">
    <strong>Browser not supported</strong>
    <p>Your browser doesn't support the latest WebAuthn features. Use something modern!</p>
  </div>

  <%= form_with url: identity_webauthn_credentials_path, method: :post, local: true, id: "webauthn-registration-form", style: "display: none;" do |form| %>
    <%= form.hidden_field :credential_data, id: "registration-credential-data" %>
    <%= form.hidden_field :nickname, id: "registration-nickname" %>
  <% end %>

  <div x-show="browserSupported">
    <form x-on:submit.prevent="register()">
      <div class="form-group">
        <label for="webauthn-nickname">Passkey Nickname</label>
        <input
          type="text"
          id="webauthn-nickname"
          x-model="nickname"
          placeholder="e.g., Heidi's iPhone, MacBook Air"
          required
          maxlength="50"
          autocomplete="off">
        <small class="form-hint">Give this passkey a memorable name to identify it later!</small>
      </div>

      <div x-show="error" x-cloak class="alert alert-error" role="alert">
        <strong>Registration Failed</strong>
        <p x-text="error"></p>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn btn-primary" :disabled="loading">
          <span x-show="!loading">Register Passkey</span>
          <span x-show="loading" x-cloak>Registering...</span>
        </button>
        <%= link_to "Cancel",
            identity_webauthn_credentials_path,
            class: "btn btn-secondary",
            data: {
              "hx-get": identity_webauthn_credentials_path,
              "hx-target": "#webauthn-credentials-container",
              "hx-swap": "innerHTML"
            } %>
      </div>
    </form>
  </div>
</div>
