{% extends "portal/onboarding_basis.html" %}
{% block title %}Schritt 2: Persönliche Daten{% endblock %}
{% block fortschritt %}
<div class="fortschritt-bar"><div class="fortschritt-fill" style="width:40%"></div></div>
<p class="fortschritt-label">Schritt 2 von 5 – Persönliche Daten</p>
{% endblock %}
{% block inhalt %}
<div class="card mb-3">
  <div class="card-header py-3">
    <h2>Schritt 2: Persönliche Angaben</h2>
  </div>
  <div class="card-body">
    {% if fehler %}
    <div class="alert alert-danger">{{ fehler }}</div>
    {% endif %}
    <p class="text-muted small">Pflichtfelder sind mit <span class="required-mark">*</span> markiert. (Merkblatt Punkte 1–4)</p>

    <form method="post">
      {% csrf_token %}

      <div class="row g-3 mb-3">
        <div class="col-sm-6">
          <label for="vorname" class="form-label">Vorname <span class="required-mark">*</span></label>
          <input type="text" class="form-control{% if 'vorname' in fehlende_felder %} is-invalid{% endif %}" id="vorname" name="vorname" value="{{ post_data.vorname|default:data.schritt2.vorname|default:'' }}" required>
        </div>
        <div class="col-sm-6">
          <label for="nachname" class="form-label">Nachname <span class="required-mark">*</span></label>
          <input type="text" class="form-control{% if 'nachname' in fehlende_felder %} is-invalid{% endif %}" id="nachname" name="nachname" value="{{ post_data.nachname|default:data.schritt2.nachname|default:'' }}" required>
        </div>
        <div class="col-sm-6">
          <label for="geburtsdatum" class="form-label">Geburtsdatum <span class="required-mark">*</span></label>
          <input type="date" class="form-control{% if 'geburtsdatum' in fehlende_felder %} is-invalid{% endif %}" id="geburtsdatum" name="geburtsdatum" value="{{ post_data.geburtsdatum|default:data.schritt2.geburtsdatum|default:'' }}" required>
        </div>
      </div>

      <hr class="my-3">
      <h6 class="text-muted">Adresse (Punkt 1)</h6>
      <div class="row g-3 mb-3">
        <div class="col-12">
          <label for="strasse" class="form-label">Straße und Hausnummer <span class="required-mark">*</span></label>
          <input type="text" class="form-control{% if 'strasse' in fehlende_felder %} is-invalid{% endif %}" id="strasse" name="strasse" value="{{ post_data.strasse|default:data.schritt2.strasse|default:'' }}" required>
        </div>
        <div class="col-sm-4">
          <label for="plz" class="form-label">PLZ <span class="required-mark">*</span></label>
          <input type="text" class="form-control{% if 'plz' in fehlende_felder %} is-invalid{% endif %}" id="plz" name="plz" maxlength="10" value="{{ post_data.plz|default:data.schritt2.plz|default:'' }}" required>
        </div>
        <div class="col-sm-8">
          <label for="ort" class="form-label">Ort <span class="required-mark">*</span></label>
          <input type="text" class="form-control{% if 'ort' in fehlende_felder %} is-invalid{% endif %}" id="ort" name="ort" value="{{ post_data.ort|default:data.schritt2.ort|default:'' }}" required>
        </div>
      </div>

      <hr class="my-3">
      <h6 class="text-muted">Kontaktdaten (Punkt 1)</h6>
      <div class="row g-3 mb-3">
        <div class="col-sm-6">
          <label for="telefon" class="form-label">Telefonnummer <span class="required-mark">*</span></label>
          <input type="tel" class="form-control{% if 'telefon' in fehlende_felder %} is-invalid{% endif %}" id="telefon" name="telefon" value="{{ post_data.telefon|default:data.schritt2.telefon|default:'' }}" required>
        </div>
        <div class="col-sm-6">
          <label for="handynummer" class="form-label">Handynummer</label>
          <input type="tel" class="form-control" id="handynummer" name="handynummer" value="{{ post_data.handynummer|default:data.schritt2.handynummer|default:'' }}">
        </div>
        <div class="col-12">
          <label for="email" class="form-label">E-Mail-Adresse <span class="required-mark">*</span></label>
          <input type="email" class="form-control{% if 'email' in fehlende_felder %} is-invalid{% endif %}" id="email" name="email" value="{{ post_data.email|default:data.schritt2.email|default:einladung.email }}" required>
        </div>
      </div>

      <hr class="my-3">
      <h6 class="text-muted">Verwandtschaftsverhältnis (Punkt 4)</h6>
      <div class="mb-3">
        <label for="verwandtschaftsverhaeltnis" class="form-label">
          Verwandtschaftsverhältnis zu einem Geschwisterteil des Stifters Hendrik van Hees oder seiner Ehefrau Aletta Theyssen-Vogel <span class="required-mark">*</span>
        </label>
        <textarea class="form-control{% if 'verwandtschaftsverhaeltnis' in fehlende_felder %} is-invalid{% endif %}" id="verwandtschaftsverhaeltnis" name="verwandtschaftsverhaeltnis" rows="2" required>{{ post_data.verwandtschaftsverhaeltnis|default:data.schritt2.verwandtschaftsverhaeltnis|default:'' }}</textarea>
        <div class="form-text">z.B. „Enkelin von Margarethe van Hees, Schwester des Stifters"</div>
      </div>
      <div class="mb-3">
        <label for="familienzweig" class="form-label">Familienzweig</label>
        <select class="form-select" id="familienzweig" name="familienzweig">
          <option value="">– bitte wählen –</option>
          <option value="hauptzweig" {% if data.schritt2.familienzweig == 'hauptzweig' or post_data.familienzweig == 'hauptzweig' %}selected{% endif %}>Hauptzweig</option>
          <option value="nebenzweig" {% if data.schritt2.familienzweig == 'nebenzweig' or post_data.familienzweig == 'nebenzweig' %}selected{% endif %}>Nebenzweig</option>
          <option value="verwandt" {% if data.schritt2.familienzweig == 'verwandt' or post_data.familienzweig == 'verwandt' %}selected{% endif %}>Verwandt</option>
          <option value="anderer" {% if data.schritt2.familienzweig == 'anderer' or post_data.familienzweig == 'anderer' %}selected{% endif %}>Anderer</option>
        </select>
      </div>

      <div class="d-flex justify-content-between mt-4">
        <button type="submit" name="aktion" value="zurueck" class="btn btn-outline-secondary btn-zurueck">← Zurück</button>
        <button type="submit" class="btn btn-primary btn-weiter px-4">Weiter →</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}