{% extends "base.html" %}
{% block title %}Wichtel-Werkstatt – Raum erstellen oder beitreten{% endblock %}
{% block content %}
<section class="hero">
  <h1>Wichtel-Werkstatt</h1>
  <p>Wichteln ohne Zettel-Chaos: Raum erstellen, Mitmenschen einladen,
     Ausschlüsse festlegen und fair auslosen. 🎁</p>
</section>

{% if error %}<div class="alert alert-error" role="alert">{{ error }}</div>{% endif %}

<section class="card">
  <h2>Raum erstellen</h2>
  <form method="post" action="/rooms" class="stack">
    <label>
      Name des Raums
      <input type="text" name="room_name" maxlength="60" required
             placeholder="z. B. Familie Müller 2026">
    </label>
    <label>
      Admin-Passwort <small>(mind. 4 Zeichen)</small>
      <input type="password" name="password" minlength="4" required
             autocomplete="new-password" placeholder="Für die Raumverwaltung">
    </label>
    <button type="submit" class="btn btn-primary">Raum erstellen 🎄</button>
  </form>
</section>

<div class="divider" aria-hidden="true">❄ oder ❄</div>

<section class="card">
  <h2>Mit Code beitreten</h2>
  <form method="post" action="/join" class="stack">
    <label>
      Raumcode
      <input type="text" name="code" maxlength="6" required
             autocapitalize="characters" spellcheck="false" placeholder="z. B. ABC123">
    </label>
    <button type="submit" class="btn btn-secondary">Zum Raum 🔔</button>
  </form>
</section>
{% endblock %}