{% extends "panel/base.html" %}
{% block title %}Enable Two-Factor — JQC Control{% endblock %}
{% block page_title %}Two-Factor Authentication{% endblock %}
{% block content %}
<div class="row">
  <div class="col-lg-7">
    <h4 class="mb-3"><i class="bi bi-shield-lock"></i> Enable two-factor authentication</h4>

    <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, or enter the setup key manually.</li>
          <li>Enter the 6-digit code 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>
          <input type="text" class="form-control font-monospace" value="{{ secret }}" readonly>
        </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-2">
            <input type="text" name="code" class="form-control text-center" inputmode="numeric"
                   autocomplete="one-time-code" autofocus placeholder="123456" style="letter-spacing:.3em;">
            <button type="submit" class="btn btn-primary"><i class="bi bi-check2-circle"></i> Enable</button>
          </div>
        </form>
      </div>
    </div>

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