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

{% block content %}
    <div class="grid md:grid-cols-2 gap-x-16 gap-y-4">
        <div>
            <h2 class="text-2xl font-semibold pb-4">
                Persönliche Daten
            </h2>
            {{ form_start(personalDataForm) }}
            <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
                {{ form_row(personalDataForm.firstName) }}
                {{ form_row(personalDataForm.name) }}
                {{ form_row(personalDataForm.gender) }}
                {{ form_row(personalDataForm.dateOfBirth) }}
            </div>
            <h3 class="text-xl font-semibold pb-2">
                Anschrift
            </h3>
            <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
                <div class="col-span-2">
                    {{ form_row(personalDataForm.street) }}
                </div>
                {{ form_row(personalDataForm.postCode) }}
                {{ form_row(personalDataForm.city) }}
                {{ form_row(personalDataForm.country) }}
            </div>
            <h3 class="text-xl font-semibold pb-2">
                Kontakt
            </h3>
            <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
                <div class="col-span-2">
                    {{ form_row(personalDataForm.email) }}
                </div>
                {{ form_row(personalDataForm.phone) }}
                {{ form_row(personalDataForm.mobile) }}
            </div>
            <button type="submit" class="button bg-button">
                Speichern
            </button>
            {{ form_rest(personalDataForm) }}
            {{ form_end(personalDataForm) }}
        </div>
        <div>
            <div>
                <h2 class="text-2xl font-semibold pb-4">
                    Newsletter
                </h2>
                <p class="pb-4">
                    Du bist aktuell {% if not personalData.communication.newsletter %}<strong>nicht</strong> {% endif%} zum Newsletter
                    angemeldet.
                </p>
                <button type="button"
                        class="button bg-button bg-button--secondary"
                        hx-post="{{ path('app_personal_data_newsletter') }}"
                        hx-target="#myep"
                        hx-swap="outerHTML">
                    {% if personalData.communication.newsletter %}
                        jetzt abmelden
                    {% else %}
                        jetzt anmelden
                    {% endif %}
                </button>
            </div>
        </div>
    </div>
{% endblock %}