{% extends "base.html" %}
{% block title %}Enable Two-Factor{% endblock %}
{% block content %}
<div class="row justify-content-center mt-3">
  <div class="col-md-8 col-lg-6">
    <h3 class="mb-3"><i class="bi bi-shield-lock"></i> Enable two-factor authentication</h3>

    <div class="card shadow-sm mb-3">
      <div class="card-body">
        <ol class="mb-3 ps-3">
          <li class="mb-1">Install an authenticator app (Google Authenticator, Authy, 1Password, …).</li>
          <li class="mb-1">Scan the QR code below, or enter the setup key manually.</li>
          <li>Enter the 6-digit code the app shows to confirm and finish.</li>
        </ol>

        <div class="text-center mb-3">
          <div class="d-inline-block p-2 bg-white border rounded" style="width:220px;height:220px;">
            {{ qr_svg | safe }}
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label small text-muted mb-1">Manual setup key</label>
          <div class="input-group">
            <input type="text" class="form-control font-monospace" id="secretKey"
                   value="{{ secret }}" readonly>
            <button class="btn btn-outline-secondary" type="button" onclick="copySecret()">
              <i class="bi bi-clipboard"></i>
            </button>
          </div>
        </div>

        <form method="POST" action="{{ url_for('auth.mfa_setup') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <label class="form-label fw-semibold">Enter the 6-digit code to confirm</label>
          <div class="input-group input-group-lg mb-3">
            <input type="text" name="code" class="form-control text-center"
                   inputmode="numeric" autocomplete="one-time-code" autofocus
                   placeholder="123456" style="letter-spacing:.4em;">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check2-circle"></i> Enable
            </button>
          </div>
        </form>
      </div>
    </div>

    <a href="{{ url_for('auth.profile') }}" class="btn btn-outline-secondary">
      <i class="bi bi-x-lg"></i> Cancel
    </a>
  </div>
</div>

<script>
function copySecret() {
  var el = document.getElementById('secretKey');
  el.select();
  el.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(el.value);
}
</script>
{% endblock %}