{% extends 'layout.html.twig' %}

{% block title %}Mein Profil{% endblock %}

{% macro formErrors(form) %}
    <ul>
        {% for child in form.children %}
            {% for error in child.vars.errors %}
                <li>
                    {{ child.vars.label }}: {{error.message}}
                </li>
            {% endfor %}
        {%endfor%}
    </ul>
{% endmacro %}

{% block content %}
    {{ form_start(form) }}

    <div {{ stimulus_controller('tabs', {}, { 'buttonActive': 'btn--secondary' }) }}>

        <div class="grid lg:grid-cols-3 gap-y-8 lg:gap-y-0 lg:gap-x-16">
            <div class="flex flex-col space-y-2">
                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 0 }) }}>
                    Persönliche Daten
                </button>
                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 1 }) }}>
                    Anschrift/Kontakt
                </button>
                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 2 }) }}>
                    Bankverbindung
                </button>
                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 3 }) }}>
                    Sonstiges
                </button>
            </div>
            <div class="lg:col-span-2">
                {% if not form.vars.valid %}
                    <div class="max-w-screen-md mx-auto border border-red-500 rounded-md p-4 text-red-500 mb-8">
                        {{ _self.formErrors(form) }}
                        {{ _self.formErrors(form.address) }}
                        {{ _self.formErrors(form.communication) }}
                        {{ _self.formErrors(form.bankAccount) }}
                    </div>
                {%endif%}
                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
                    <h3 class="text-xl font-bold pb-2">
                        Persönliche Daten
                    </h3>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.salutation) }}
                        {{ form_row(form.academicTitle) }}
                        {{ form_row(form.firstName) }}
                        {{ form_row(form.lastName) }}
                        {{ form_row(form.gender) }}
                        {{ form_row(form.dateOfBirth) }}
                        {{ form_row(form.nationality) }}
                    </div>
                </div>

                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
                    <h3 class="text-xl font-bold pb-2">
                        Anschrift
                    </h3>
                    <div class="flex flex-col space-y-4 pb-8">
                        {{ form_row(form.address.street) }}
                        {{ form_row(form.address.postCode) }}
                        {{ form_row(form.address.city) }}
                        {{ form_row(form.address.country) }}
                    </div>
                    <h3 class="text-xl font-bold pb-2">
                        Kontakt
                    </h3>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.communication.email) }}
                        {{ form_row(form.communication.phone) }}
                        {{ form_row(form.communication.mobile) }}
                    </div>
                </div>

                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
                    <h3 class="text-xl font-bold pb-2">
                        Bankverbindung
                    </h3>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.bankAccount.iban) }}
                        {{ form_row(form.bankAccount.bic) }}
                        {{ form_row(form.bankAccount.bank) }}
                        {{ form_row(form.bankAccount.holder) }}
                    </div>
                </div>

                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
                    <h3 class="text-xl font-bold pb-2">
                        Sonstiges
                    </h3>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.taxId) }}
                        {{ form_row(form.healthInsuranceCompany) }}
                        {{ form_row(form.remarks) }}
                    </div>
                </div>

                <div class="max-w-screen-md mx-auto">
                    <button type="submit" class="btn">
                        Aktualisieren
                    </button>
                </div>

            </div>
        </div>

    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
{% endblock %}