<?php use App\Helpers\Helper; ?>
<div class="auth-logo">
  <a href="<?= APP_URL ?>/" class="d-flex align-items-center gap-2 text-decoration-none d-md-none mb-4">
    <i class="bi bi-buildings-fill text-primary fs-2"></i>
    <div>
      <div class="fw-800 text-primary fs-5 lh-1">Zabibu Residence</div>
    </div>
  </a>
</div>
<div class="auth-title">Welcome back</div>
<div class="auth-subtitle">Sign in to your account to continue</div>

<form method="POST" action="<?= APP_URL ?>/login" autocomplete="on">
  <?= Helper::csrf() ?>
  <div class="mb-3">
    <label class="form-label">Email Address</label>
    <div class="input-group">
      <span class="input-group-text bg-light border-end-0"><i class="bi bi-envelope text-muted"></i></span>
      <input type="email" name="email" class="form-control border-start-0" placeholder="you@example.com" required autofocus value="<?= Helper::e($_POST['email'] ?? '') ?>">
    </div>
  </div>
  <div class="mb-3">
    <div class="d-flex justify-content-between align-items-center mb-1">
      <label class="form-label mb-0">Password</label>
      <a href="<?= APP_URL ?>/forgot-password" class="small text-primary text-decoration-none">Forgot password?</a>
    </div>
    <div class="input-group">
      <span class="input-group-text bg-light border-end-0"><i class="bi bi-lock text-muted"></i></span>
      <input type="password" name="password" id="passwordField" class="form-control border-start-0 border-end-0" placeholder="Enter your password" required>
      <button type="button" class="input-group-text bg-light border-start-0" onclick="togglePwd()">
        <i class="bi bi-eye" id="pwdEyeIcon"></i>
      </button>
    </div>
  </div>
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="remember" id="remember">
      <label class="form-check-label small" for="remember">Remember me</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary w-100 py-3 fw-600 mb-3">
    <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
  </button>
  <p class="text-center text-muted small mb-0">
    Don't have an account? <a href="<?= APP_URL ?>/register" class="text-primary fw-600 text-decoration-none">Create account</a>
  </p>
</form>


<script>
function togglePwd() {
  var f = document.getElementById('passwordField');
  var i = document.getElementById('pwdEyeIcon');
  if (f.type === 'password') { f.type = 'text'; i.className = 'bi bi-eye-slash'; }
  else { f.type = 'password'; i.className = 'bi bi-eye'; }
}
</script>
