{% extends "base.html" %}
{% block title %}Registrieren · Putzliga{% endblock %}
{% block content %}
  <section class="auth-layout">
    <div class="hero-card hero-card--brand">
      <p class="eyebrow">Gemeinsam sauberer</p>
      <h2>Erstelle dein Konto und steig direkt in die Liga ein.</h2>
      <p>Nach dem Login landest du sofort bei „Meine Aufgaben“ und kannst Aufgaben anlegen, verteilen und Punkte sammeln.</p>
    </div>

    <section class="panel auth-panel">
      <p class="eyebrow">Registrieren</p>
      <h2>Neues Konto</h2>
      <form method="post" class="form-grid">
        {{ form.hidden_tag() }}
        <div class="field">
          {{ form.name.label }}
          {{ form.name(placeholder="Dein Name") }}
          {% for error in form.name.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.email.label }}
          {{ form.email(placeholder="mail@example.com") }}
          {% for error in form.email.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.password.label }}
          {{ form.password(placeholder="Mindestens 6 Zeichen") }}
          {% for error in form.password.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.password_confirm.label }}
          {{ form.password_confirm(placeholder="Passwort wiederholen") }}
          {% for error in form.password_confirm.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        {{ form.submit(class_="button button--wide") }}
      </form>
      <p class="inline-note">Schon dabei? <a href="{{ url_for('auth.login') }}">Zum Login</a></p>
    </section>
  </section>
{% endblock %}