<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login &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">
  <link rel="icon" type="image/png" href="<?= APP_URL ?>/public/images/favicon.png">
</head>
<body>
<div class="login-page">
  <div class="login-card">
    <div class="login-logo">
      <!-- <div class="logo-icon"><i class="bi bi-activity"></i></div> -->
       <div class="logo-icon"><img src="<?= APP_URL ?>/public/images/gsa_logo.png" alt="GSA Logo" style="width: 90px; height: 40px;"></div>
      <h1>MetLAB</h1>
      <p>Ghana Standards Authority &mdash; Scientific Metrology Division</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; ?>

    <form method="POST">
      <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>">
      <div class="mb-3">
        <label class="form-label fw-semibold small">Email Address</label>
        <div class="input-group">
          <span class="input-group-text bg-light"><i class="bi bi-envelope"></i></span>
          <input type="email" name="email" class="form-control" placeholder="officer@gsa.gov.gh" required autofocus>
        </div>
      </div>
      <div class="mb-4">
        <label class="form-label fw-semibold small">Password</label>
        <div class="input-group">
          <span class="input-group-text bg-light"><i class="bi bi-lock"></i></span>
          <input type="password" name="password" class="form-control" id="pwField" placeholder="••••••••" required>
          <button type="button" class="btn btn-light border" onclick="togglePw()"><i class="bi bi-eye" id="eyeIcon"></i></button>
        </div>
      </div>
      <button type="submit" class="btn btn-primary w-100 py-2">
        <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
      </button>
    </form>

    <div class="text-center mt-4 text-muted small">
      &copy; <?= date('Y') ?> Ghana Standards Authority. All rights reserved.
    </div>
  </div>
</div>
<script>
function togglePw() {
  const f = document.getElementById('pwField'), i = document.getElementById('eyeIcon');
  f.type = f.type === 'password' ? 'text' : 'password';
  i.className = f.type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
}
</script>
</body>
</html>
