<% @page_title = "Edit Passkey" %>

<% content_for :header do %>
  <div class="header__actions header__actions--start">
    <%= back_link_to "Passkeys", my_passkeys_path, "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 txt-align-start flex flex-column gap">
  <% if params[:created] %>
    <p class="margin-none">Your passkey has been registered. Give it a name so you can identify it later.</p>
  <% end %>

  <%= form_with model: @passkey, scope: :passkey, url: my_passkey_path(@passkey), html: { class: "flex flex-column gap" } do |form| %>
    <div class="flex flex-column gap-half">
      <strong><%= form.label "Name your passkey" %></strong>
      <%= form.text_field :name, autofocus: true, class: "input", placeholder: "e.g. MacBook Pro, iPhone", data: { "1p-ignore": "" }, autocomplete: "off" %>
    </div>

    <%= form.submit "Save", class: "btn btn--link center" %>
  <% end %>

  <div class="txt-align-center">
    <%= button_to my_passkey_path(@passkey), method: :delete,
          class: "btn txt-negative borderless txt-small",
          data: { turbo_confirm: "Are you sure you want to remove this passkey?" } do %>
      <%= icon_tag "trash" %>
      <span>Remove this passkey</span>
    <% end %>
  </div>
</section>
