<div class="session-card">
  <div class="session-header">
    <div class="session-icon">
      <%= inline_icon("fingerprint", size: 32) %>
    </div>
    <div class="session-info">
      <div class="session-device">
        <%= identity_webauthn_credential.display_name %>
      </div>
    </div>
  </div>

  <div class="session-details">
    <div>
      <span class="detail-label"><%= t "identity_webauthn_credentials.created_at" %></span>
      <span><%= identity_webauthn_credential.created_at.strftime("%b %d, %Y at %l:%M %p") %></span>
    </div>
    <div>
      <span class="detail-label"><%= t "identity_webauthn_credentials.last_used" %></span>
      <span><%= time_ago_in_words(identity_webauthn_credential.updated_at) %> ago</span>
    </div>
  </div>

  <div x-data="{ showConfirm: false }">
    <div x-show="!showConfirm">
      <button x-on:click="showConfirm = true" class="danger small-btn" type="button">
        <%= t("identity_webauthn_credentials.remove") %> <%= inline_icon("delete", size: 16) %>
      </button>
    </div>

    <div x-show="showConfirm" x-cloak class="confirmation-inline">
      <p class="confirmation-text"><%= t("identity_webauthn_credentials.remove_confirmation") %></p>
      <div class="confirmation-actions">
        <button x-on:click="showConfirm = false" class="button" type="button">Cancel</button>
        <%= button_to identity_webauthn_credential_path(identity_webauthn_credential),
                      method: :delete,
                      class: "button danger" do %>
          Confirm
        <% end %>
      </div>
    </div>
  </div>
</div>
