<?php
$app = app();
$vm = \App\AccountPages::login($app);
$flash = $vm['flash'] ?? null;
$error = $vm['error'] ?? '';
$emailPrefill = $vm['emailPrefill'] ?? '';
?>
<main class="auth-wrap">
  <div class="container auth-grid">
    <section class="card auth-card">
      <div class="badge">Login</div>
      <h1 class="mt-1" style="margin: 12px 0;">Willkommen zurück</h1>
      <p class="muted">Melde dich an, um Events zu erstellen, teilzunehmen und dein Profil zu verwalten.</p>
      <?php if ($flash): ?>
        <div class="toast-bar" style="margin-top: 10px;"><?= htmlspecialchars($flash['message'], ENT_QUOTES) ?></div>
      <?php endif; ?>
      <?php if ($error): ?>
        <div class="toast-bar" style="margin-top: 10px; border-color:#f87171; color:#991b1b;">Fehler: <?= htmlspecialchars($error, ENT_QUOTES) ?></div>
      <?php endif; ?>
      <form class="stack gap-12" style="margin-top: 14px;" method="post" action="/login">
        <div class="stack gap-6">
          <label class="label" for="loginEmail">E-Mail</label>
          <input id="loginEmail" name="email" class="input" type="email" required placeholder="du@example.com" value="<?= htmlspecialchars($emailPrefill, ENT_QUOTES) ?>">
        </div>
        <div class="stack gap-6">
          <label class="label" for="loginPassword">Passwort</label>
          <div style="position:relative;">
            <input id="loginPassword" name="password" class="input" type="password" required placeholder="********" autocomplete="current-password">
            <button type="button" id="togglePassword" aria-label="Passwort anzeigen" style="position:absolute; right:8px; top:50%; transform: translateY(-50%); background:transparent; border:none; cursor:pointer;">👁️</button>
          </div>
        </div>
        <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 8px;">
          <label style="display:flex; gap:8px; align-items:center; font-size:14px; color: var(--color-muted);">
            <input type="checkbox" style="width:16px; height:16px;"> Angemeldet bleiben
          </label>
          <a class="text-muted" href="/reset">Passwort vergessen?</a>
        </div>
        <button class="btn block" type="submit">Anmelden</button>
      </form>
      <p class="muted small" style="margin-top: 12px;">Noch kein Konto? <a href="/register">Jetzt registrieren</a></p>
    </section>

    <aside class="auth-aside">
      <img class="auth-logo" src="/assets/bilder/logo_male.png" alt="Papa-Kind-Treff Logo">
      <h3>Neu hier?</h3>
      <p class="auth-meta">Registriere dich kostenlos, lege dein Profil an und finde Treffen in deiner Nähe. Kinderinfos kannst du später hinzufügen.</p>
      <div class="stack gap-12" style="margin-top: 12px;">
        <a class="btn block" href="/register">Kostenlos registrieren</a>
        <a class="btn ghost block" href="/">Zur Startseite</a>
      </div>
    </aside>
  </div>
</main>
<script>
  (function(){
    const btn = document.getElementById('togglePassword');
    const input = document.getElementById('loginPassword');
    if (btn && input) {
      btn.addEventListener('click', () => {
        const isPwd = input.type === 'password';
        input.type = isPwd ? 'text' : 'password';
        btn.textContent = isPwd ? '🙈' : '👁️';
      });
    }
  })();
</script>
