<?php
$app = app();
$vm = \App\AccountPages::register($app);
$flash = $vm['flash'] ?? null;
$error = $vm['error'] ?? '';
$displayName = $vm['displayName'] ?? '';
$email = $vm['email'] ?? '';
?>
<main class="auth-wrap">
  <div class="container auth-grid">
    <section class="card auth-card">
      <div class="badge">Registrierung</div>
      <h1 class="mt-1" style="margin: 12px 0;">Jetzt Account anlegen</h1>
      <p class="muted">Registriere dich mit wenigen Angaben. Alles Weitere pflegst du später im Mitgliederbereich.</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="/register">
        <div class="stack gap-6">
          <label class="label" for="regName">Anzeigename</label>
          <input id="regName" name="display_name" class="input" required placeholder="z. B. Papa Alex" value="<?= htmlspecialchars($displayName ?? '', ENT_QUOTES) ?>">
        </div>
        <div class="stack gap-6">
          <label class="label" for="regEmail">E-Mail</label>
          <input id="regEmail" name="email" class="input" type="email" required placeholder="du@example.com" value="<?= htmlspecialchars($email ?? '', ENT_QUOTES) ?>">
        </div>
        <div class="form-grid">
          <div class="stack gap-6">
            <label class="label" for="regPassword">Passwort</label>
            <input id="regPassword" name="password" class="input" type="password" required placeholder="********" autocomplete="new-password">
          </div>
          <div class="stack gap-6">
            <label class="label" for="regPassword2">Passwort bestätigen</label>
            <input id="regPassword2" name="password_confirm" class="input" type="password" required placeholder="********" autocomplete="new-password">
          </div>
        </div>
        <button class="btn block" type="submit">Account erstellen</button>
      </form>
      <p class="muted small" style="margin-top: 12px;">Schon registriert? <a href="/login">Zum Login</a></p>
    </section>

    <aside class="auth-aside">
      <img class="auth-logo" src="/assets/bilder/logo_female.png" alt="Papa-Kind-Treff Logo">
      <h3>Tipps für den Start</h3>
      <ul class="list" style="margin-top: 8px;">
        <li>Kurz und knackig registrieren.</li>
        <li>Weitere Profil- und Kinderinfos gibst du später im Mitgliederbereich an.</li>
      </ul>
      <div class="stack gap-12" style="margin-top: 12px;">
        <a class="btn ghost block" href="/login">Ich habe schon ein Konto</a>
        <a class="btn block" href="/">Zur Startseite</a>
      </div>
    </aside>
  </div>
</main>
