{% extends "base.html" %}
{% block title %}Two-Factor Verification{% endblock %}
{% block content %}
<div class="row justify-content-center mt-4">
  <div class="col-md-5 col-lg-4">
    <div class="card shadow-sm">
      <div class="card-body p-4">
        <div class="text-center mb-3">
          <i class="bi bi-shield-lock fs-1 text-primary"></i>
          <h4 class="mt-2 mb-1">Two-factor verification</h4>
          <p class="text-muted small mb-0">
            Enter the 6-digit code from your authenticator app.
          </p>
        </div>

        <form method="POST" action="{{ url_for('auth.mfa_challenge') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

          <div class="mb-3">
            <input type="text" name="code" class="form-control form-control-lg text-center"
                   inputmode="numeric" autocomplete="one-time-code" autofocus
                   placeholder="123456" style="letter-spacing:.4em;">
          </div>

          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="recovery" id="useRecovery" value="1">
            <label class="form-check-label small" for="useRecovery">
              I'll use a recovery code instead
            </label>
          </div>

          <button type="submit" class="btn btn-primary w-100">
            <i class="bi bi-check2-circle"></i> Verify
          </button>
        </form>

        <div class="text-center mt-3">
          <a href="{{ url_for('auth.login') }}" class="small text-muted">Back to login</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// When "use recovery code" is toggled, relax the numeric hints for the code box.
(function () {
  var chk = document.getElementById('useRecovery');
  var box = document.querySelector('input[name="code"]');
  if (!chk || !box) return;
  chk.addEventListener('change', function () {
    if (chk.checked) {
      box.setAttribute('inputmode', 'text');
      box.setAttribute('placeholder', 'xxxx-xxxx');
      box.style.letterSpacing = '.15em';
    } else {
      box.setAttribute('inputmode', 'numeric');
      box.setAttribute('placeholder', '123456');
      box.style.letterSpacing = '.4em';
    }
  });
})();
</script>
{% endblock %}