{% extends "base.html" %}
{% block title %}Set up MFA · SD RMM{% endblock %}
{% block bodyclass %}auth-page{% endblock %}
{% block header %}{% endblock %}
{% block content %}
<div class="auth-card auth-card--wide">
  <div class="auth-head">
    <h1>Set up two-factor</h1>
    <p class="sub">Scan this QR with Google Authenticator, Authy, or 1Password, then enter the 6-digit code.</p>
  </div>

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

  <div class="qr-wrap">
    {{ qr_svg | safe }}
  </div>

  <details class="muted">
    <summary>Can't scan? Enter the code manually.</summary>
    <code class="copy-code">{{ secret }}</code>
  </details>

  <form method="post" action="/mfa/enroll" class="form">
    <label>Code from your app
      <input type="text" name="code" inputmode="numeric" pattern="[0-9 ]*"
             maxlength="9" required autocomplete="one-time-code" autofocus>
    </label>
    <button type="submit" class="btn btn-primary">Confirm and continue</button>
  </form>
</div>
{% endblock %}