{% extends "base.html" %}

{% block title %}Two-Factor Authentication - Makenotwork{% endblock %}

{% block body_attrs %} class="centered-page"{% endblock %}

{% block content %}
    <h1 class="brand-h1">Makenot<span class="dot">.</span>work</h1>
    <div class="login-container">
      {% if let Some(err) = error %}
      <div class="alert alert-error mb-4">{{ err }}</div>
      {% endif %}

      <form class="login-form"
            hx-post="/auth/verify-2fa"
            hx-target="closest .login-container"
            hx-swap="outerHTML"
            hx-indicator="#twofa-spinner">
        <h2 class="subtitle-h2">Two-Factor Authentication</h2>
        <p class="muted mb-4 text-sm">
            Enter the 6-digit code from your authenticator app, or use a backup code.
        </p>
        <div class="form-group">
          <label for="code">Verification Code</label>
          <input
            type="text"
            id="code"
            name="code"
            placeholder="000000"
            required
            autofocus
            autocomplete="one-time-code"
            inputmode="numeric"
            pattern="[a-zA-Z0-9]*"
            maxlength="8"
          />
        </div>

        <button type="submit" class="btn-primary">
          Verify
          <span id="twofa-spinner" class="htmx-indicator"> ...</span>
        </button>

        <div class="foot-link">
          <a href="/login">Back to login<span class="dot">.</span></a>
        </div>
      </form>
    </div>
{% endblock %}