{% extends "base.html" %}
{% block title %}Set up MFA{% endblock %}
{% block content %}
<div class="section-head">
  <div>
    <span class="section-tag">// account › mfa</span>
    <h1>Enable multi-factor authentication</h1>
    <p class="lead">Scan the QR code with your authenticator (Google Authenticator, Authy, 1Password, …) and enter the 6-digit code to confirm.</p>
  </div>
</div>

<div class="panel" style="max-width: 540px; margin: 0 auto;">
  <div class="panel-body">
    <img src="data:image/png;base64,{{ qr_b64 }}" alt="MFA QR code" class="mfa-qr">
    <p class="dim" style="text-align:center; font-size: .82rem; margin: 16px 0 4px;">Manual key (if you can't scan):</p>
    <div class="mfa-secret">{{ secret }}</div>

    <hr>

    <form method="post" class="form" novalidate>
      {{ form.csrf_token }}
      <div>
        {{ form.code.label }}
        {{ form.code(autocomplete="one-time-code", inputmode="numeric", pattern="[0-9]{6}", maxlength=6) }}
        <div class="help">Enter the current 6-digit code shown in your authenticator.</div>
      </div>
      <div class="btn-row">
        {{ form.submit(class_="btn btn-primary") }}
        <a href="{{ url_for('auth.account') }}" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}