{% extends "@templates/"~template~"/view/Users/baseUser.html.twig" %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascript %}
    {{ parent() }}
    <script src="{{ asset('templates/default/assets/js/user.js') }}"></script>
{% endblock %}

{% block userContent %}
    {% set validateErrors = [] %}
    {% for message in app.flashes('validate.error') %}
        {% set validateErrors = [message] %}
    {% endfor %}

    <section class="editUserData">
        <div class="grid-container">
            <div class="grid-x">
                <div class="cell">
                    <h3>Twoje dane</h3>
                </div>
            </div>
            <div class="grid-x small-up-1 medium-up-1 large-up-2">
                <div class="cell">
                    <div class="grid-x">
                        <div class="cell">
                            {% if user.status != 'A' %}
                                {{ form_start(emailForm) }}
                                {% if form_errors(emailForm) %}
                                    <div class="callout alert small">
                                        {{ form_errors(emailForm) }}
                                    </div>
                                {% endif %}
                                {% if form_errors(emailForm['email']) %}
                                    <div class="callout alert small">
                                        {{ form_errors(emailForm['email']) }}
                                    </div>
                                {% endif %}
                                <div class="input-group">
                            <span class="input-group-label">
                                 {{ form_label(emailForm['email']) }}
                                <a data-toggle="buttonEmailForm buttonEmailFormButton" class="changeButton" data-classInputForm="inputEmailForm" data-toggler=".hide" id="buttonEmailFormButton">(Zmień)</a>
                            </span>
                                    {{ form_widget(emailForm['email'], {'attr': {'class': 'input-group-field inputEmailForm', 'readonly': true}}) }}
                                    <div class="input-group-button">
                                        <button type="submit" class="hide" data-toggler=".hide" id="buttonEmailForm">
                            <span>
                                <i class="fa fa-arrow-right" aria-hidden="true"></i>
                            </span>
                                        </button>
                                    </div>
                                </div>
                                {{ form_end(emailForm) }}
                            {% else %}
                                <div class="input-group">
                            <span class="input-group-label">
                                 <label for="">E-mail:</label>
                            </span>
                                    <input type="text" readonly="readonly" value="{{ user.email }}" class="input-group-field inputEmailForm">
                                    <div class="input-group-button">
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="grid-x">
                        <div class="cell">
                            <p class="avatarTitle">Avatar</p>
                            <div class="grid-x align-middle">
                                <div class="cell shrink">
                                    {% if app.user.avatar %}
                                        <div class="userAvatar float-center">
                                            <img src="{{ asset(app.user.avatar) }}" alt="{{  app.user.nickname }}">
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="cell">
                                    <div class="buttonEdit">
                                        <button type="button" data-open="modalEditAvatar">
                                            <span>Zmień avatar</span>
                                        </button>
                                        <div class="reveal" id="modalEditAvatar" data-reveal>
                                            <p>Zmień avatar</p>
                                            {{ form_start(userAvatarsForm) }}
                                            {% if form_errors(userAvatarsForm) %}
                                                <div class="callout alert small">
                                                    {{ form_errors(userAvatarsForm) }}
                                                </div>
                                            {% endif %}
                                            <div class="grid-x align-middle">
                                                <div class="cell">
                                            <span class="title">
                                                Twój avatar:
                                            </span>
                                                    {% if app.user.avatar %}
                                                        <div class="userAvatar float-center">
                                                            <img src="{{ asset(app.user.avatar) }}" alt="{{  app.user.nickname }}">
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                <div class="cell">
                                            <span class="title">
                                                Wgraj nowe zdjęcie:
                                            </span>
                                                    {{ form_widget(userAvatarsForm.image) }}
                                                    {% if app.user.image %}
                                                        <a href="{{ path('wi_front_user_remove_image') }}">Usuń zdjęcie</a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="grid-x">
                                                <div class="cell text-right">
                                                    <div class="buttonEdit">
                                                        <button type="submit">
                                                            <span>Zapisz</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="title">
                                        lub wybierz avatar z listy:
                                                {% if app.user.image %}
                                                    <br><small>
                                                Aby wyświetlić avatar z listy musisz usunąć zdjęcie wgrane z komputera.
                                            </small>
                                                {% endif %}
                                    </span>
                                            <div class="grid-x rowForm">
                                                <div class="cell small-12 medium-12 large-12">


                                                    <fieldset class="fieldset">
                                                        {% for avatar in userAvatarsForm.avatar %}
                                                            {{ form_widget(avatar) }}
                                                            <label for="{{ avatar.vars.id }}">
                                                                <img src="{{ asset('media/avatars/' ~ avatar.vars.label) }}" alt="">
                                                            </label>
                                                        {% endfor %}
                                                        {{ form_widget(userAvatarsForm) }}
                                                    </fieldset>
                                                </div>
                                            </div>
                                            <div class="grid-x">
                                                <div class="cell text-right">
                                                    <div class="buttonEdit">
                                                        <button type="submit">
                                                            <span>Zapisz</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            {{ form_end(userAvatarsForm) }}

                                            <button class="close-button" data-close aria-label="Close modal" type="button">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-x small-up-1 medium-up-1 large-up-2">
                <div class="cell">
                    <div class="grid-x">
                        <div class="cell">
                            <p>Twoje dane profilowe
                                <a data-toggle="buttonEditProfile inputProfileFormButton" class="changeButton changeButtonBirth" data-classInputForm="inputProfileForm" data-toggler=".hide" id="inputProfileFormButton">(Edytuj)</a>
                            </p>
                            {{ form_start(profileForm) }}
                            {% if form_errors(profileForm) %}
                                <div class="callout alert small">
                                    {{ form_errors(profileForm) }}
                                </div>
                            {% endif %}
                            {% if form_errors(profileForm['firstName']) %}
                                <div class="callout alert small">
                                    {{ form_errors(profileForm['firstName']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(profileForm['firstName']) }}
                        </span>
                                {{ form_widget(profileForm['firstName'], {'attr': {'class': 'input-group-field inputProfileForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(profileForm['lastName']) %}
                                <div class="callout alert small">
                                    {{ form_errors(profileForm['lastName']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(profileForm['lastName']) }}
                        </span>
                                {{ form_widget(profileForm['lastName'], {'attr': {'class': 'input-group-field inputProfileForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(profileForm['sex']) %}
                                <div class="callout alert small">
                                    {{ form_errors(profileForm['sex']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(profileForm['sex']) }}
                        </span>
                                {{ form_widget(profileForm['sex'], {'attr': {'class': 'input-group-field inputProfileFormSelect', 'disabled': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(profileForm['dateOfBirth']) %}
                                <div class="callout alert small">
                                    {{ form_errors(profileForm['dateOfBirth']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(profileForm['dateOfBirth']) }}
                        </span>
                                {{ form_widget(profileForm['dateOfBirth'], {'attr': {'class': 'input-group-field inputProfileForm dateTime', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(profileForm['pesel']) %}
                                <div class="callout alert small">
                                    {{ form_errors(profileForm['pesel']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(profileForm['pesel']) }}
                        </span>
                                {{ form_widget(profileForm['pesel'], {'attr': {'class': 'input-group-field inputProfileForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(profileForm['description']) %}
                                <div class="callout alert small">
                                    {{ form_errors(profileForm['description']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(profileForm['description']) }}
                        </span>
                                {{ form_widget(profileForm['description'], {'attr': {'class': 'input-group-field inputProfileForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            <div class="grid-x">
                                <div class="cell text-center">
                                    <div class="buttonEdit hide" id="buttonEditProfile" data-toggler=".hide">
                                        <button type="submit">
                                            <span>Zapisz</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {{ form_end(profileForm) }}
                        </div>
                    </div>
                    <div class="grid-x">
                        <div class="cell">
                            <p>
                                <a data-open="modalEditPassword">Edytuj hasło</a>
                            </p>
                            <div class="reveal" id="modalEditPassword" data-reveal {{ form_errors(passwordForm) or form_errors(passwordForm['oldPassword']) or form_errors(passwordForm['newPassword']['first']) or form_errors(passwordForm['newPassword']['second']) ? 'data-reveal-open="true"' }}>
                                <p>Zmień hasło</p>
                                {{ form_start(passwordForm) }}
                                {% if form_errors(passwordForm) %}
                                    <div class="callout alert small">
                                        {{ form_errors(passwordForm) }}
                                    </div>
                                {% endif %}
                                {% if form_errors(passwordForm['oldPassword']) %}
                                    <div class="callout alert small">
                                        {{ form_errors(passwordForm['oldPassword']) }}
                                    </div>
                                {% endif %}
                                <div class="input-group">
                            <span class="input-group-label">
                             {{ form_label(passwordForm['oldPassword']) }}
                            </span>
                                    {{ form_widget(passwordForm['oldPassword'], {'attr': {'class': 'input-group-field inputAdressForm'}}) }}
                                    <div class="input-group-button">

                                    </div>
                                </div>
                                {% if form_errors(passwordForm['newPassword']['first']) %}
                                    <div class="callout alert small">
                                        {{ form_errors(passwordForm['newPassword']['first']) }}
                                    </div>
                                {% endif %}
                                <div class="input-group">
                            <span class="input-group-label">
                             {{ form_label(passwordForm['newPassword']['first']) }}
                            </span>
                                    {{ form_widget(passwordForm['newPassword']['first'], {'attr': {'class': 'input-group-field inputAdressForm'}}) }}
                                    <div class="input-group-button">

                                    </div>
                                </div>
                                {% if form_errors(passwordForm['newPassword']['second']) %}
                                    <div class="callout alert small">
                                        {{ form_errors(passwordForm['newPassword']['second']) }}
                                    </div>
                                {% endif %}
                                <div class="input-group">
                            <span class="input-group-label">
                             {{ form_label(passwordForm['newPassword']['second']) }}
                            </span>
                                    {{ form_widget(passwordForm['newPassword']['second'], {'attr': {'class': 'input-group-field inputAdressForm'}}) }}
                                    <div class="input-group-button">

                                    </div>
                                </div>
                                <div class="grid-x">
                                    <div class="cell text-right">
                                        <div class="buttonEdit">
                                            <button type="submit">
                                                <span>Zapisz</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {{ form_end(passwordForm) }}
                                <button class="close-button" data-close aria-label="Close modal" type="button">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="grid-x">
                        <div class="cell">
                            <p>Twój adres
                                <a data-toggle="buttonEditAddress inputAdressFormButton" class="changeButton" data-classInputForm="inputAdressForm" data-toggler=".hide" id="inputAdressFormButton">(Edytuj)</a>
                            </p>
                            {{ form_start(billingDataForm) }}
                            {% if form_errors(billingDataForm) %}
                                <div class="callout alert small">
                                    {{ form_errors(billingDataForm) }}
                                </div>
                            {% endif %}
                            {% if form_errors(billingDataForm['name']) %}
                                <div class="callout alert small">
                                    {{ form_errors(billingDataForm['name']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(billingDataForm['name']) }}
                        </span>
                                {{ form_widget(billingDataForm['name'], {'attr': {'class': 'input-group-field inputAdressForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(billingDataForm['address']) %}
                                <div class="callout alert small">
                                    {{ form_errors(billingDataForm['address']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(billingDataForm['address']) }}
                        </span>
                                {{ form_widget(billingDataForm['address'], {'attr': {'class': 'input-group-field inputAdressForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(billingDataForm['zip']) %}
                                <div class="callout alert small">
                                    {{ form_errors(billingDataForm['zip']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(billingDataForm['zip']) }}
                        </span>
                                {{ form_widget(billingDataForm['zip'], {'attr': {'class': 'input-group-field inputAdressForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(billingDataForm['city']) %}
                                <div class="callout alert small">
                                    {{ form_errors(billingDataForm['city']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(billingDataForm['city']) }}
                        </span>
                                {{ form_widget(billingDataForm['city'], {'attr': {'class': 'input-group-field inputAdressForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(billingDataForm['country']) %}
                                <div class="callout alert small">
                                    {{ form_errors(billingDataForm['country']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(billingDataForm['country']) }}
                        </span>
                                {{ form_widget(billingDataForm['country'], {'attr': {'class': 'input-group-field inputAdressForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            {% if form_errors(billingDataForm['NIP']) %}
                                <div class="callout alert small">
                                    {{ form_errors(billingDataForm['NIP']) }}
                                </div>
                            {% endif %}
                            <div class="input-group">
                        <span class="input-group-label">
                             {{ form_label(billingDataForm['NIP']) }}
                        </span>
                                {{ form_widget(billingDataForm['NIP'], {'attr': {'class': 'input-group-field inputAdressForm', 'readonly': true}}) }}
                                <div class="input-group-button">

                                </div>
                            </div>
                            <div class="grid-x">
                                <div class="cell text-center">
                                    <div class="buttonEdit hide" id="buttonEditAddress" data-toggler=".hide">
                                        <button type="submit">
                                            <span>Zapisz</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {{ form_end(billingDataForm) }}
                        </div>
                    </div>
                    <div class="grid-x">
                        <div class="cell">
                            <p>
                                Zainteresowania:
                                <a data-open="modalEditInterested">(Edytuj)</a>
                            </p>
                            {% if userInterested is defined %}
                                <span class="listInterested">
                            {% for userInterest in userInterested %}
                                {{ userInterest.interest.name }},
                            {% endfor %}
                        </span>
                            {% endif %}
                            <div class="reveal" id="modalEditInterested" data-reveal>
                                <p>Wybierz swoje zainteresowania</p>
                                {{ form_start(userInterestsForm) }}
                                {% if form_errors(userInterestsForm) %}
                                    <div class="callout alert small">
                                        {{ form_errors(userInterestsForm) }}
                                    </div>
                                {% endif %}
                                <div class="grid-x rowForm">
                                    <div class="cell small-12 medium-12 large-12">
                                        <fieldset class="fieldset">
                                            {{ form_widget(userInterestsForm) }}
                                        </fieldset>
                                    </div>
                                </div>
                                <div class="grid-x">
                                    <div class="cell text-right">
                                        <div class="buttonEdit">
                                            <button type="submit">
                                                <span>Zapisz</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {{ form_end(userInterestsForm) }}

                                <button class="close-button" data-close aria-label="Close modal" type="button">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}