{% extends 'base.html' %}
{% load static %}
{% load help_tags %}

{% block title %}{{ title }} - Stiftungsverwaltung{% endblock %}

{% block content %}
<div class="container-fluid px-4">

    {# ── Header (mirrors detail page style) ── #}
    <div class="card shadow-sm mb-4 border-0" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
        <div class="card-body py-3">
            <div class="row align-items-center">
                <div class="col-auto">
                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width:56px;height:56px;font-size:1.4rem;">
                        <i class="fas fa-user-plus"></i>
                    </div>
                </div>
                <div class="col">
                    <h4 class="mb-1">{{ title }}</h4>
                    <div class="text-muted small">Alle Felder ausfuellen und speichern</div>
                </div>
                <div class="col-auto">
                    <a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>Zurueck
                    </a>
                </div>
            </div>
        </div>
    </div>

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

        {% if form.errors %}
        <div class="alert alert-danger alert-dismissible fade show mb-3" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>Bitte korrigieren Sie die markierten Felder.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endif %}

        <div class="row g-3">
            {# ── Left Column ── #}
            <div class="col-lg-6">
                {# Personal Data #}
                <div class="card shadow-sm mb-3">
                    <div class="card-header py-2"><i class="fas fa-user me-2 text-primary"></i><strong>Persoenliche Daten</strong></div>
                    <div class="card-body py-2">
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td class="text-muted" style="width:140px;">Vorname *</td>
                                    <td>
                                        {{ form.vorname }}
                                        {% if form.vorname.errors %}<div class="invalid-feedback d-block">{{ form.vorname.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Nachname *</td>
                                    <td>
                                        {{ form.nachname }}
                                        {% if form.nachname.errors %}<div class="invalid-feedback d-block">{{ form.nachname.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Geburtsdatum</td>
                                    <td>
                                        {{ form.geburtsdatum }}
                                        {% if form.geburtsdatum.errors %}<div class="invalid-feedback d-block">{{ form.geburtsdatum.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Familienzweig</td>
                                    <td>
                                        {{ form.familienzweig }}
                                        {% if form.familienzweig.errors %}<div class="invalid-feedback d-block">{{ form.familienzweig.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Berufsgruppe</td>
                                    <td>
                                        {{ form.berufsgruppe }}
                                        {% if form.berufsgruppe.errors %}<div class="invalid-feedback d-block">{{ form.berufsgruppe.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Contact & Address #}
                <div class="card shadow-sm mb-3">
                    <div class="card-header py-2"><i class="fas fa-address-book me-2 text-info"></i><strong>Kontakt & Adresse</strong></div>
                    <div class="card-body py-2">
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td class="text-muted" style="width:140px;">E-Mail</td>
                                    <td>
                                        {{ form.email }}
                                        {% if form.email.errors %}<div class="invalid-feedback d-block">{{ form.email.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Telefon</td>
                                    <td>
                                        {{ form.telefon }}
                                        {% if form.telefon.errors %}<div class="invalid-feedback d-block">{{ form.telefon.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">IBAN</td>
                                    <td>
                                        {{ form.iban }}
                                        {% if form.iban.errors %}<div class="invalid-feedback d-block">{{ form.iban.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Strasse</td>
                                    <td>
                                        {{ form.strasse }}
                                        {% if form.strasse.errors %}<div class="invalid-feedback d-block">{{ form.strasse.errors.0 }}</div>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">PLZ / Ort</td>
                                    <td>
                                        <div class="row g-2">
                                            <div class="col-4">{{ form.plz }}</div>
                                            <div class="col-8">{{ form.ort }}</div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {# ── Right Column ── #}
            <div class="col-lg-6">
                {# Financial #}
                <div class="card shadow-sm mb-3">
                    <div class="card-header py-2"><i class="fas fa-euro-sign me-2 text-warning"></i><strong>Finanzen & Foerderung</strong></div>
                    <div class="card-body py-2">
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td class="text-muted" style="width:180px;">Quartalsbetrag</td>
                                    <td>{{ form.vierteljaehrlicher_betrag }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Monatl. Bezuege</td>
                                    <td>{{ form.monatliche_bezuege }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Jaehrl. Einkommen</td>
                                    <td>{{ form.jaehrliches_einkommen }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Vermoegen</td>
                                    <td>{{ form.vermoegen }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Haushaltsgroesse</td>
                                    <td>{{ form.haushaltsgroesse }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Standardkonto</td>
                                    <td>{{ form.standard_konto }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Finanz. Notlage</td>
                                    <td>
                                        <div class="form-check">{{ form.finanzielle_notlage }}<label class="form-check-label" for="{{ form.finanzielle_notlage.id_for_label }}">Ja</label></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Unterstuetzung best.</td>
                                    <td>
                                        <div class="form-check">{{ form.unterstuetzung_bestaetigt }}<label class="form-check-label" for="{{ form.unterstuetzung_bestaetigt.id_for_label }}">Ja</label></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Study & Prerequisites #}
                <div class="card shadow-sm mb-3">
                    <div class="card-header py-2"><i class="fas fa-graduation-cap me-2 text-secondary"></i><strong>Studium & Voraussetzungen</strong></div>
                    <div class="card-body py-2">
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td class="text-muted" style="width:180px;">Abkoemmling gem. Satzung</td>
                                    <td>
                                        <div class="form-check">{{ form.ist_abkoemmling }}<label class="form-check-label" for="{{ form.ist_abkoemmling.id_for_label }}">Ja</label></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Ausbildungsstand</td>
                                    <td>{{ form.ausbildungsstand }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Institution</td>
                                    <td>{{ form.institution }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Studiennachweis erf.</td>
                                    <td>
                                        <div class="form-check">{{ form.studiennachweis_erforderlich }}<label class="form-check-label" for="{{ form.studiennachweis_erforderlich.id_for_label }}">Ja</label></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Letzter Nachweis</td>
                                    <td>{{ form.letzter_studiennachweis }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Description & Notes #}
                <div class="card shadow-sm mb-3">
                    <div class="card-header py-2"><i class="fas fa-sticky-note me-2 text-secondary"></i><strong>Beschreibung & Notizen</strong></div>
                    <div class="card-body py-2">
                        <div class="mb-2">
                            <small class="text-muted">Projektbeschreibung</small>
                            {{ form.projekt_beschreibung }}
                        </div>
                        <div class="mb-2">
                            <small class="text-muted">Notizen</small>
                            {{ form.notizen }}
                        </div>
                        <div class="form-check">
                            {{ form.aktiv }}
                            <label class="form-check-label" for="{{ form.aktiv.id_for_label }}">{{ form.aktiv.label }}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# ── Save bar ── #}
        <div class="card shadow-sm mt-2 mb-4 border-0" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
            <div class="card-body py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-times me-1"></i>Abbrechen
                    </a>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save me-1"></i>Speichern
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}