{% extends 'base.html' %}
{% block title %}Two-Factor Authentication - DEICMS{% endblock %}
{% block content %}
<div class="topbar">
  <span class="page-title"><i class="bi bi-shield-lock"></i>Two-Factor Authentication (2FA)</span>
</div>

<div class="card" style="max-width:640px;">
  <div class="card-body p-4">
    {% if enabled %}
      <div class="d-flex align-items-center mb-3">
        <span class="badge bg-success me-2"><i class="bi bi-check-circle me-1"></i>Enabled</span>
        <span class="text-muted small">Two-factor authentication is active on your account.</span>
      </div>
      <p class="small text-muted">
        When you log in, you will be asked for a 6-digit code from your authenticator
        app in addition to your password. This protects your account even if your
        password is stolen.
      </p>
      <form method="POST" action="{{ url_for('auth.two_fa_disable') }}"
            onsubmit="return confirm('Disable multi-factor authentication?');">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <button type="submit" class="btn btn-outline-danger btn-sm">
          <i class="bi bi-shield-x me-1"></i>Disable 2FA
        </button>
      </form>
    {% else %}
      <p class="small text-muted mb-3">
        Scan this QR code with an authenticator app (such as Google Authenticator or
        Authy), then enter the 6-digit code it shows to enable two-factor authentication.
      </p>
      <div class="text-center mb-3">
        <img src="{{ qr_data }}" alt="2fa QR code" style="width:200px;height:200px;border:1px solid #D4D8D8;border-radius:8px;padding:6px;background:#fff;" />
      </div>
      <p class="small text-muted text-center mb-3">
        Can’t scan? Enter this key manually:
        <code class="hash-text">{{ secret }}</code>
      </p>
      <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <label class="form-label small">Enter the 6-digit code to confirm</label>
        <div class="input-group" style="max-width:260px;">
          <input type="text" name="otp" class="form-control" inputmode="numeric"
                 maxlength="6" placeholder="000000" required />
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-check2 me-1"></i>Enable
          </button>
        </div>
      </form>
    {% endif %}
  </div>
</div>
{% endblock %}