{% extends "auth_base.html" %}

{% block content %}
<div class="auth-card">
  <div class="passkey-orbit" aria-hidden="true">
    <span class="orbit-ring ring-one"></span>
    <span class="orbit-ring ring-two"></span>
    <svg viewBox="0 0 48 48" class="fingerprint">
      <path d="M24 10c-7.7 0-14 6.3-14 14v3c0 2.1 1.7 3.8 3.8 3.8s3.8-1.7 3.8-3.8v-3a6.4 6.4 0 0 1 12.8 0v7.5c0 2.5 1.2 4.7 3 6.1M24 16.5c-4.1 0-7.4 3.3-7.4 7.4v7.4c0 2.9-1 5.6-2.8 7.7M24 22.8c-.6 0-1.2.5-1.2 1.2v10.3c0 3.6-1.2 7-3.2 9.7M31.2 23.8v10.4c0 2.8-.6 5.4-1.8 7.8M38 30.5c0 4.5-1.3 8.7-3.5 12.2" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
    </svg>
  </div>

  <div class="auth-heading">
    <p class="eyebrow">Welcome back</p>
    <h2>Open the door.</h2>
    <p>Use the passkey saved on this device. No password, no code, no waiting.</p>
  </div>

  <div class="alert alert-error" id="auth-error" role="alert" hidden></div>
  <div class="alert alert-warn" id="auth-warning" role="alert" hidden></div>

  <button class="btn btn-primary btn-block btn-passkey" id="passkey-login" type="button">
    <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2.2a4.1 4.1 0 0 0-4.1 4.1v2h1.7v-2a2.4 2.4 0 0 1 4.8 0v2H9.3v8.9H7.6v-7h4.8v3.2h1.7v-3.2h1.7v-1.9h-7v-2A4.1 4.1 0 0 1 10 2.2Z" fill="currentColor"/></svg>
    <span id="passkey-login-label">Continue with passkey</span>
    <span class="btn-spinner" aria-hidden="true"></span>
  </button>

  <div class="auth-divider"><span>or</span></div>

  <details class="username-disclosure">
    <summary>Use a specific username</summary>
    <label class="field compact">
      <span class="field-label">Username</span>
      <input class="input" id="login-username" type="text" autocomplete="username webauthn" spellcheck="false" placeholder="pat">
    </label>
    <p class="field-hint">Needed only for security keys that don't store a discoverable passkey.</p>
  </details>

  <p class="auth-hint" id="auth-hint">
    Works with Touch&nbsp;ID, Windows Hello, iPhone, Android, and hardware security keys.
  </p>

  {% if setup_required %}
  <div class="setup-callout">
    <div>
      <strong>Fresh instance</strong>
      <p>No one has claimed this Warden yet.</p>
    </div>
    <a class="text-link" href="/_warden/setup">Set it up <span aria-hidden="true">→</span></a>
  </div>
  {% endif %}
</div>
{% endblock %}