<?php
$title = 'Vérification 2FA';
$base  = rtrim(App\Core\Config::baseUrl(), '/');
?>

<div class="mb-4">
  <h1 class="h4 fw-bold mb-1" style="color:var(--auth-text);letter-spacing:-.02em;">Double authentification</h1>
  <p class="mb-0" style="color:var(--auth-muted);font-size:.9rem;">Saisissez le code à 6 chiffres généré par votre application.</p>
</div>

<?php if (!empty($error)): ?>
  <div class="alert alert-danger d-flex align-items-center gap-2 mb-4" role="alert">
    <i class="fas fa-circle-exclamation fa-fw"></i>
    <span><?= htmlspecialchars($error) ?></span>
  </div>
<?php endif; ?>

<form method="post" action="<?= htmlspecialchars($base) ?>/2fa" class="needs-validation" novalidate>
  <div class="mb-4">
    <label class="form-label" for="twoFaCode">Code de vérification</label>
    <div class="input-group">
      <span class="input-group-text"><i class="fas fa-shield-halved fa-fw"></i></span>
      <input
        type="text"
        name="code"
        id="twoFaCode"
        class="form-control"
        pattern="^[0-9]{6}$"
        required
        placeholder="000000"
        maxlength="6"
        inputmode="numeric"
        autocomplete="one-time-code"
        aria-label="Code 2FA"
        style="letter-spacing:.25em;font-size:1.1rem;"
      >
      <div class="invalid-feedback">Code à 6 chiffres requis.</div>
    </div>
  </div>
  <div class="d-grid">
    <button class="btn btn-primary" type="submit">
      <i class="fas fa-check me-1"></i> Vérifier
    </button>
  </div>
  <p class="text-center mt-3 mb-0" style="font-size:.8125rem;color:var(--auth-muted);">
    <a href="<?= htmlspecialchars($base) ?>/login" class="text-decoration-none" style="color:var(--auth-accent);">
      <i class="fas fa-arrow-left me-1"></i> Retour à la connexion
    </a>
  </p>
</form>

<script>
(function(){
  const f = document.querySelector('form.needs-validation');
  if (!f) return;
  f.addEventListener('submit', e => {
    if (!f.checkValidity()) { e.preventDefault(); e.stopPropagation(); }
    f.classList.add('was-validated');
  });
})();
</script>
