Files
myep/templates/personal_data/index.html.twig
T

65 lines
2.9 KiB
Twig

{% 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, { 'attr': { 'data-action': 'loading#toggle' } }) }}
<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 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 %}