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

{% block content %}
    {% include '_partials/_flashes.html.twig' %}
    <div class="px-4 lg:px-8 py-8 lg:py-16">
        <h1 class="text-white uppercase pb-4">
            Meine<br>Daten
        </h1>
    </div>
    {% if app.session.get('_profile_completion_redirect') %}
        <div class="mx-4 lg:mx-8">
            {% include '_partials/_alert.html.twig' with {
                level: 'info',
                messages: ['Bitte vervollständige erst deine Daten. Du wirst anschließend automatisch weitergeleitet.']
            } %}
        </div>
    {% endif %}
    <div class="p-4 lg: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">
                    <h2>
                        {{ personalData.fullName }}
                    </h2>
                </div>
                <div id="newsletter">
                    {% if newsletterPendingConfirmation %}
                        {% include '_partials/_alert.html.twig' with {
                            level: 'info',
                            messages: ['Deine Anmeldung muss noch bestätigt werden. Bitte nutze den Link aus der Bestätigungs-E-Mail, die du in Kürze erhältst.']
                        } %}
                    {% endif %}
                    <button type="button"
                            class="relative button button--primary"
                            hx-post="{{ path('app_personal_data_newsletter') }}"
                            hx-swap="none">
                        {% if newsletterPendingConfirmation %}
                            Bestätigungs E-Mail erneut senden
                        {% else %}
                            Jetzt zum E&amp;P-Newsletter anmelden
                        {% endif %}
                    </button>
                </div>
            </div>
            <div class="pt-8">
                {{ form_start(personalDataForm) }}
                <div class="grid md:grid-cols-2 gap-x-8 gap-y-4 pb-4">
                    <div>
                        <h3 class="text-white">
                            Persönliches
                        </h3>
                        {{ form_row(personalDataForm.gender, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.dateOfBirth, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.nationality, { 'label_attr': { 'class': 'text-white' } }) }}
                        <h3 class="text-white">
                            Kontakt
                        </h3>
                        {{ form_row(personalDataForm.email, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.mobile, { 'label_attr': { 'class': 'text-white' } }) }}
                        {{ form_row(personalDataForm.phone, { 'label_attr': { 'class': 'text-white' } }) }}
                    </div>
                    <div>
                        <h3 class="text-white">
                            Anschrift
                        </h3>
                        {{ 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>
                <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 %}