{% extends "base.html" %}
{% set active = 'admin' %}
{% block title %}Enable two-factor authentication{% endblock %}
{% block content %}
<div class="auth-card wide">
  <h1>Enable two-factor authentication</h1>
  <p class="muted">Scan this QR code with Google Authenticator, Microsoft Authenticator, Authy or any TOTP app, then enter the 6-digit code it shows to confirm.</p>
  <div class="qr-wrap">
    <img alt="MFA QR code" src="data:image/png;base64,{{ qr }}">
    <p class="muted small">Can't scan? Enter this key manually: <code>{{ secret }}</code></p>
  </div>
  <form method="post">
    <label>Authentication code
      <input type="text" name="code" inputmode="numeric" maxlength="7" required autofocus autocomplete="one-time-code">
    </label>
    <div class="row-gap">
      <button class="btn btn-primary" type="submit">Confirm &amp; enable</button>
      <a class="btn btn-ghost" href="{{ url_for('admin') }}">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}