<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OTP Verification &mdash; MetLAB</title>
  <link rel="stylesheet" href="<?= APP_URL ?>/public/css/bootstrap.min.css">
  <link rel="stylesheet" href="<?= APP_URL ?>/public/css/bootstrap-icons.css">
  <link rel="stylesheet" href="<?= APP_URL ?>/public/css/style.css">
</head>
<body>
<div class="login-page">
  <div class="login-card">
    <div class="login-logo">
      <div class="logo-icon text-warning"><i class="bi bi-shield-lock"></i></div>
      <h1>OTP Verification</h1>
      <p>Enter the 6-digit code sent to your phone</p>
    </div>

    <?php $flash = getFlash(); if ($flash): ?>
    <div class="alert alert-<?= $flash['type'] === 'error' ? 'danger' : $flash['type'] ?> py-2 small">
      <?= e($flash['message']) ?>
    </div>
    <?php endif; ?>

    <?php if (isset($_SESSION['dev_otp'])): ?>
    <div class="alert alert-warning small">
      <strong>Dev Mode OTP:</strong> <code class="fs-5"><?= e($_SESSION['dev_otp']) ?></code>
      <br><small class="text-muted">(Remove this in production – deliver via SMS)</small>
    </div>
    <?php endif; ?>

    <form method="POST">
      <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>">
      <div class="mb-4">
        <label class="form-label fw-semibold small">6-Digit OTP Code</label>
        <input type="text" name="otp" class="form-control form-control-lg text-center fw-bold letter-spacing-3"
               maxlength="6" pattern="\d{6}" placeholder="000000" required autofocus autocomplete="one-time-code">
        <div class="form-text text-center">Valid for <?= OTP_EXPIRY_MINUTES ?> minutes</div>
      </div>
      <button type="submit" class="btn btn-primary w-100 py-2">
        <i class="bi bi-check-circle me-2"></i>Verify & Login
      </button>
    </form>

    <div class="text-center mt-3">
      <a href="<?= APP_URL ?>/index.php?page=login" class="text-muted small">
        <i class="bi bi-arrow-left"></i> Back to login
      </a>
    </div>
  </div>
</div>
</body>
</html>
