{% extends "base.html" %}
{% block title %}Verify MFA · SD RMM{% endblock %}
{% block bodyclass %}auth-page{% endblock %}
{% block header %}{% endblock %}
{% block content %}
<div class="auth-card">
  <div class="auth-head">
    <h1>Enter your code</h1>
    <p class="sub">From your authenticator app.</p>
  </div>

  {% if error %}<div class="alert alert-error">{{ error }}</div>{% endif %}

  <form method="post" action="/mfa/verify" class="form">
    <label>Authentication code
      <input type="text" name="code" inputmode="text"
             maxlength="20" required autocomplete="one-time-code" autofocus
             placeholder="6-digit code or recovery code">
    </label>
    <label class="checkbox" style="display:flex;align-items:center;gap:.5rem;font-weight:400;">
      <input type="checkbox" name="remember" value="1">
      Remember this device for 30 days
    </label>
    <button type="submit" class="btn btn-primary">Verify</button>
  </form>

  <p class="sub" style="margin-top:.75rem;font-size:.85rem;">
    Lost your authenticator? Enter one of your single-use <strong>recovery codes</strong> instead.
  </p>

  <p class="auth-foot">
    <form method="post" action="/logout" class="inline">
      <button class="link" type="submit">Sign out</button>
    </form>
  </p>
</div>
{% endblock %}