myep-team/templates/teamer/profile.html.twig

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

{% block title %}Mein Profil{% endblock %}

{% macro formErrors(form) %}
    <ul>
        {% for child in form.children %}
            {% for error in child.vars.errors %}
                <li>
                    {{error.message}}
                </li>
            {% endfor %}
        {%endfor%}
    </ul>
{% endmacro %}

{% block content %}
    {{ form_start(form) }}

    <div {{ stimulus_controller('tabs', {}, { 'buttonActive': 'btn--secondary btn--active' }) }}>

        <div class="grid lg:grid-cols-3 gap-y-8 lg:gap-y-0 lg:gap-x-16">
            <div class="flex flex-col space-y-2">
                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 0 }) }}>
                    Persönliche Daten
                </button>
                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 1 }) }}>
                    Anschrift/Kontakt
                </button>
                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 2 }) }}>
                    Bankverbindung
                </button>
                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 3 }) }}>
                    Sonstiges/Foto
                </button>
            </div>
            <div class="lg:col-span-2">
                {% if not form.vars.valid %}
                    <div class="max-w-screen-md mx-auto border border-red-500 rounded-md p-4 text-red-500 mb-8">
                        {{ _self.formErrors(form) }}
                        {{ _self.formErrors(form.address) }}
                        {{ _self.formErrors(form.communication) }}
                        {{ _self.formErrors(form.bankAccount) }}
                    </div>
                {% elseif errors|length > 0 %}
                    <div class="max-w-screen-md mx-auto border border-red-500 rounded-md p-4 text-red-500 mb-8">
                        <ul>
                            {% for error in errors %}
                                <li>
                                    {{ error.message }}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
                    <h3 class="text-xl font-bold pb-2">
                        Persönliche Daten
                    </h3>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.salutation) }}
                        {{ form_row(form.academicTitle) }}
                        {{ form_row(form.firstName) }}
                        {{ form_row(form.lastName) }}
                        {{ form_row(form.gender) }}
                        {{ form_row(form.dateOfBirth) }}
                        {{ form_row(form.nationality) }}
                    </div>
                </div>

                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
                    <h3 class="text-xl font-bold pb-2">
                        Anschrift
                    </h3>
                    <div class="flex flex-col space-y-4 pb-8">
                        {{ form_row(form.address.street) }}
                        {{ form_row(form.address.postCode) }}
                        {{ form_row(form.address.city) }}
                        {{ form_row(form.address.country) }}
                    </div>
                    <h3 class="text-xl font-bold pb-2">
                        Kontakt
                    </h3>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.communication.email) }}
                        {{ form_row(form.communication.phone) }}
                        {{ form_row(form.communication.mobile) }}
                    </div>
                </div>

                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
                    <h3 class="text-xl font-bold pb-2">
                        Bankverbindung
                    </h3>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.bankAccount.iban) }}
                        {{ form_row(form.bankAccount.bic) }}
                        {{ form_row(form.bankAccount.bank) }}
                        {{ form_row(form.bankAccount.holder) }}
                    </div>
                </div>

                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
                    <h3 class="text-xl font-bold pb-2">
                        Sonstiges
                    </h3>
                    <div class="flex flex-col space-y-4 pb-8">
                        {{ form_row(form.taxId) }}
                        {{ form_row(form.healthInsuranceCompany) }}
                        {{ form_row(form.remarks) }}
                    </div>
                    <h3 class="text-xl font-bold pb-2">
                        Fotoupload
                    </h3>
                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            {% include '_partials/_upload_collection_form.html.twig' with {
                                'endpoint_upload': path('_uploader_upload_photo'),
                                'upload_session_params': form.vars.upload_session_params,
                            } %}
                        </div>
                        <div>
                            {% if teamer.photo %}
                                <img src="{{ asset(teamer.photo.filename | imagine_filter('profile')) }}"
                                     class="w-full h-auto rounded-full border-2 border-primary"
                                     alt="{{ teamer.firstName }}">
                            {% else %}
                                <svg class="w-full h-auto text-gray-300" viewBox="0 0 10 10" fill="currentColor">
                                    <circle r="5" cx="5" cy="5"/>
                                </svg>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="max-w-screen-md mx-auto">
                    <button type="submit" class="btn">
                        Aktualisieren
                    </button>
                </div>

            </div>
        </div>

    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
{% endblock %}