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

{% block content %}
    <div class="grid md:grid-cols-2 gap-x-16 gap-y-4">
        <div>
            {% include '_partials/_flashes.html.twig' %}
            {{ form_start(personalDataForm, { 'attr': { 'data-action': 'loading#toggle' } }) }}
            <div class="pb-4">
                <button type="submit" class="button bg-button">
                    Speichern
                </button>
            </div>
            <h1 class="text-3xl font-semibold pb-2">
                Persönliche Daten
            </h1>
            <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
                <div>
                    <p class="text-lg font-semibold">
                        Vorname
                    </p>
                    {{ personalData.firstName }}
                </div>
                <div>
                    <p class="text-lg font-semibold">
                        Nachname
                    </p>
                    {{ personalData.name }}
                </div>
                <div>
                    <p class="text-lg font-semibold">
                        Gender
                    </p>
                    {{ personalData.gender|map_gender }}
                </div>
                <div>
                    <p class="text-lg font-semibold">
                        Geburtsdatum
                    </p>
                    {{ personalData.dateOfBirth|date('d.m.Y') }}
                </div>
                <div>
                    <p class="text-lg font-semibold">
                        Nationaliät
                    </p>
                    {{ personalData.nationality|map_nationality|default('-') }}
                </div>
            </div>
            <h2 class="text-xl font-semibold pb-2">
                Anschrift
            </h2>
            <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>
            <h2 class="text-xl font-semibold pb-2">
                Kontakt
            </h2>
            <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 id="newsletter">
                <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="relative button bg-button bg-button--secondary"
                        hx-post="{{ path('app_personal_data_newsletter') }}"
                        hx-target="#newsletter"
                        hx-select="#newsletter"
                        hx-indicator="#button-indicator"
                        hx-swap="innerHTML">
                    {% if personalData.communication.newsletter %}jetzt abmelden{% else %}jetzt anmelden{% endif %}
                    <span class="htmx-indicator absolute top-0 left-0 inset-0 bg-secondary/80 flex items-center justify-center" id="button-indicator">{% include '_partials/_spinner.html.twig' with { 'class': 'w-6 h-6 text-white' } %}</span>
                </button>
            </div>
        </div>
    </div>
{% endblock %}