<% @page_title = "Passkeys" %>

<% content_for :header do %>
  <div class="header__actions header__actions--start">
    <%= back_link_to "My profile", user_path(Current.user), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
  </div>

  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
<% end %>

<section class="panel panel--wide shadow center">
  <p class="font-weight-medium margin-none-block-start">Passkeys let you sign in securely without a password or email code.</p>

  <% if @passkeys.any? %>
    <ul class="margin-none-block-start margin-block-end-double unpad">
      <%= render partial: "my/passkeys/passkey", collection: @passkeys %>
    </ul>
  <% end %>

  <footer>
    <%= passkey_registration_button my_passkeys_path, options: @registration_options, error: { class: "txt-negative" }, cancellation: { class: "txt-subtle" }, class: "btn btn--link center txt-medium" do %>
      <%= icon_tag "add" %>
      <span>Register a passkey</span>
    <% end %>

    <p class="txt-small txt-subtle txt-balance margin-none-block-end">
      Your browser will prompt you to create a passkey using your device's biometrics, PIN, or security key
    </p>
  </footer>
</section>
