{% extends "layout.html" %}
{% set title = "Account" %}
{% block content %}
<div class="admin-heading">
  <h1>{{ user.name }} <span class="muted small">{{ user.id }} · {{ user.role }}</span></h1>
</div>
<h2>Passkeys</h2>
<p class="muted">Keep at least two (e.g. laptop and phone), so losing one device doesn't lock you out. If you lose them all, an admin can send you a new link, or run <code>blog invite --user {{ user.id }}</code> on the server.</p>
{% if link %}
<div class="notice">
  <p>Open this link on the device that should get the passkey. It works once, for 30 minutes.</p>
  <div class="copy-field"><input type="text" id="invite-link" value="{{ link }}" readonly><button class="button" type="button" data-copy="invite-link">Copy</button> <a class="button button--primary" href="{{ link }}">Use it here</a></div>
</div>
{% endif %}
<table class="admin-table">
  <thead><tr><th>Name</th><th class="hide-narrow">Added</th><th>Last used</th><th></th></tr></thead>
  <tbody>
    {% for p in user.passkeys %}
    <tr>
      <td>{{ p.name }}</td>
      <td class="muted hide-narrow">{{ p.created | datetime }}</td>
      <td class="muted">{{ p.last_used | datetime if p.last_used else "never" }}</td>
      <td>{% if user.passkeys | length > 1 %}
        <form method="post" action="/account/passkeys/delete" data-confirm="Remove passkey “{{ p.name }}”?">
          <input type="hidden" name="id" value="{{ p.id }}">
          <button class="link-button danger" type="submit">Remove</button>
        </form>{% endif %}
      </td>
    </tr>
    {% else %}
    <tr><td colspan="4" class="muted">No passkeys{% if no_auth %} (dev mode signs you in without one){% endif %}.</td></tr>
    {% endfor %}
  </tbody>
</table>
{% if not no_auth %}
<form method="post" action="/account/passkeys/new" style="margin-top:1rem">
  <button class="button button--primary" type="submit">Add a passkey</button>
</form>
{% endif %}
{% endblock %}