<?php session_start(); ?>

<div class="bg-light d-flex justify-content-center align-items-center" style="height:100vh;">
  <div class="card shadow p-4" style="width:400px;">
    <h4 class="text-center mb-3"><?= trad('Sign in'); ?></h4>

    <form action="dologin.php" method="POST">
      <div class="mb-3">
        <label for="email" class="form-label"><?= trad('Tel / Email'); ?></label>
        <input type="text" name="login" id="login" class="form-control" required>
      </div>
      <div class="mb-3">
        <label for="password" class="form-label"><?= trad('Password'); ?></label>
        <div class="input-group">
          <input type="password" name="password" id="password" class="form-control" required placeholder="<?= trad('Pssword'); ?>">
          <button type="button" class="btn btn-outline-secondary" id="togglePassword" tabindex="-1">
            👁️
          </button>
        </div>
      </div>
      <button type="submit" class="btn btn-primary w-100"><?= trad('Sign in'); ?></button>
    </form>

    <div class="mt-3 text-center">
      <a href="index.php?p=newlisting"><?= trad('Sign up'); ?></a>
      <p>User account is created by adding a new classified</p>
    </div>
  </div>
</div>

<script>
// Afficher / masquer le mot de passe
document.getElementById('togglePassword').addEventListener('click', function() {
  const passwordField = document.getElementById('password');
  const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
  passwordField.setAttribute('type', type);

  // Changer l’icône
  this.textContent = type === 'password' ? '👁️' : '🙈';
});
</script>
