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

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

{% block content %}

    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">
                    <i class="fas fa-user text-primary me-2"></i>
                    {{ title }}
                </h1>
                <div>
                    <a href="{% url 'stiftung:person_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Zurück zur Liste
                    </a>
                </div>
            </div>

            <!-- Form -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-edit me-2"></i>Personendaten eingeben
                    </h6>
                </div>
                <div class="card-body">
                    <form method="post" novalidate>
                        {% csrf_token %}
                        
                        <!-- Error Messages -->
                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                {% for error in form.non_field_errors %}
                                <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}

                        <!-- Persönliche Daten -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-user me-2"></i>Persönliche Daten
                                </h5>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.vorname.id_for_label }}" class="form-label">
                                        {{ form.vorname.label }} *
                                    </label>
                                    {{ form.vorname }}
                                    {% if form.vorname.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.vorname.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.nachname.id_for_label }}" class="form-label">
                                        {{ form.nachname.label }} *
                                    </label>
                                    {{ form.nachname }}
                                    {% if form.nachname.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.nachname.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Geburtsdatum und Familienzweig -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.geburtsdatum.id_for_label }}" class="form-label">
                                        {{ form.geburtsdatum.label }}
                                    </label>
                                    {{ form.geburtsdatum }}
                                    {% if form.geburtsdatum.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.geburtsdatum.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.familienzweig.id_for_label }}" class="form-label">
                                        {{ form.familienzweig.label }} *
                                    </label>
                                    {{ form.familienzweig }}
                                    {% if form.familienzweig.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.familienzweig.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Adresse -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-map-marker-alt me-2"></i>Adresse
                                </h5>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.strasse.id_for_label }}" class="form-label">
                                        {{ form.strasse.label }} *
                                    </label>
                                    {{ form.strasse }}
                                    {% if form.strasse.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.strasse.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="{{ form.hausnummer.id_for_label }}" class="form-label">
                                        {{ form.hausnummer.label }} *
                                    </label>
                                    {{ form.hausnummer }}
                                    {% if form.hausnummer.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.hausnummer.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="{{ form.plz.id_for_label }}" class="form-label">
                                        {{ form.plz.label }} *
                                    </label>
                                    {{ form.plz }}
                                    {% if form.plz.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.plz.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="{{ form.ort.id_for_label }}" class="form-label">
                                        {{ form.ort.label }} *
                                    </label>
                                    {{ form.ort }}
                                    {% if form.ort.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.ort.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Kontaktdaten -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-phone me-2"></i>Kontaktdaten
                                </h5>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.telefon.id_for_label }}" class="form-label">
                                        {{ form.telefon.label }}
                                    </label>
                                    {{ form.telefon }}
                                    {% if form.telefon.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.telefon.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.email.id_for_label }}" class="form-label">
                                        {{ form.email.label }}
                                    </label>
                                    {{ form.email }}
                                    {% if form.email.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.email.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Bankdaten -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-university me-2"></i>Bankdaten
                                </h5>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="{{ form.iban.id_for_label }}" class="form-label">
                                        {{ form.iban.label }}
                                    </label>
                                    {{ form.iban }}
                                    {% if form.iban.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.iban.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Status und Notizen -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-info-circle me-2"></i>Status und Notizen
                                </h5>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="{{ form.bemerkungen.id_for_label }}" class="form-label">
                                        {{ form.bemerkungen.label }}
                                    </label>
                                    {{ form.bemerkungen }}
                                    {% if form.bemerkungen.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.bemerkungen.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-check">
                                    {{ form.aktiv }}
                                    <label class="form-check-label" for="{{ form.aktiv.id_for_label }}">
                                        {{ form.aktiv.label }}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <hr class="my-4">
                                <div class="d-flex justify-content-between">
                                    <a href="{% url 'stiftung:person_list' %}" class="btn btn-secondary">
                                        <i class="fas fa-times me-2"></i>Abbrechen
                                    </a>
                                    <button type="submit" class="btn btn-success">
                                        <i class="fas fa-save me-2"></i>
                                        {% if person %}Aktualisieren{% else %}Erstellen{% endif %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block extra_js %}
<script>
    // Auto-format IBAN input
    document.getElementById('{{ form.iban.id_for_label }}').addEventListener('input', function(e) {
        let value = e.target.value.replace(/\s/g, '').toUpperCase();
        if (value.length > 0) {
            // Add spaces every 4 characters
            value = value.match(/.{1,4}/g).join(' ');
        }
        e.target.value = value;
    });
</script>
{% endblock %}