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

{% block content %}
    <div class="px-4 lg:px-8 py-8 lg:py-16">
        <h1 class="text-white uppercase pb-4">
            Meine<br>Daten
        </h1>
    </div>
    <div class="p-4 ld:p-8">
        <div class="divide-y divide-primary-bg/40">
            <div class="grid md:grid-cols-2 gap-x-8 gap-y-4 pb-8">
                <div class="text-white">
                    <strong>Name</strong>: {{ personalData.fullName }}
                    <br>
                    <strong>Gender</strong>: {{ personalData.gender|map_gender }}
                    <br>
                    <strong>Geburtsdatum</strong>: {{ personalData.dateOfBirth|date('d.m.Y') }}
                    <br>
                    <strong>Nationalität</strong>: {{ personalData.nationality|map_nationality|default('-') }}
                </div>
                <div id="newsletter">
                    <p class="pb-4 text-white">
                        Du bist aktuell {% if not personalData.communication.newsletter %}<strong>nicht</strong> {% endif%} zum Newsletter
                        angemeldet.
                    </p>
                    <button type="button"
                            class="relative button button--primary"
                            hx-post="{{ path('app_personal_data_newsletter') }}"
                            hx-target="#newsletter"
                            hx-select="#newsletter"
                            hx-swap="outerHTML">
                        {% if personalData.communication.newsletter %}jetzt abmelden{% else %}jetzt anmelden{% endif %}
                    </button>
                </div>
            </div>
            <div class="pt-8">
                <h2 class="text-white uppercase text-xl">
                    Kontaktdaten
                </h2>
                {% include '_partials/_flashes.html.twig' %}
                {{ form_start(personalDataForm, { 'attr': { 'data-action': 'loading#toggle' } }) }}
                <div class="grid md:grid-cols-2 gap-x-8 gap-y-4 pb-4">
                    <div>
                        {{ form_row(personalDataForm.street, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.postCode, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.city, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.country, { 'label_attr': { 'class': 'text-white' } }) }}
                    </div>
                    <div>
                        {{ form_row(personalDataForm.email, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.phone, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.mobile, { 'label_attr': { 'class': 'text-white' } }) }}
                    </div>
                </div>
                <div class="flex justify-between">
                    <a href="{{ path('app_account') }}" class="button button--secondary">
                        zurück
                    </a>
                    <button type="submit" class="button button--primary">
                        Speichern
                    </button>
                </div>
                {{ form_rest(personalDataForm) }}
                {{ form_end(personalDataForm) }}
            </div>
        </div>
    </div>
{% endblock %}