{% extends getBaseTemplate(ajax_render) %}
{% block body %}
    <!-- ### $App Screen Content ### -->
    <main class='main-content bgc-grey-100' id="userSettingsPageElementWrapper">
        <div id='mainContent'>
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="bgc-white bd bdrs-3 p-10 mB-20">
                            <h4 class="c-grey-900 mB-20 text-center">{{ 'user.headers.profileSettings' | trans }}</h4>
                        </div>
                    </div>
                </div>

                <div class="row">

                    {# Forms #}
                    <div class="col-md-6">

                        <div class="bgc-white bd bdrs-3 p-10 mB-20 user-settings-wrappers-min-height">
                            <h5 class="text-center">{{ 'user.headers.changeSettings' | trans }}</h5>
                            {% if isDemo() %}
                                <p  class="text-center">
                                    <i>{{ 'user.texts.passwordDisabledForDemo' | trans }}</i>
                                </p>
                            {% endif %}
                            <div class="col-md-12 align-self-center update-record-form">
                                {{ form(avatar_form,{'attr':{' data-form-target':"UserAvatar"}}) }}
                            </div>
                            <div class="col-md-12 align-self-center update-record-form">
                                {% if not isDemo() %}
                                    {{ form(password_form,{'attr':{' data-form-target':"UserPassword"}}) }}
                                {% endif %}
                            </div>
                            <div class="col-md-12 align-self-center update-record-form">
                                {% if not isDemo() %}
                                    {{ form(lock_password_form,{'attr':{' data-form-target':"UserLockPassword"}}) }}
                                {% endif %}
                            </div>
                            <div class="col-md-12 align-self-center update-record-form">
                                {{ form(nickname_form,{'attr':{' data-form-target':"UserNickname"}}) }}
                            </div>
                        </div>

                    </div>

                    {# Preview #}

                    <div class="col-md-6">

                        <div class="bgc-white bd bdrs-3 p-10 mB-20 user-settings-wrappers-min-height">
                            <h5 class="text-center"> {{ 'user.headers.avatarPreview' | trans }} </h5>
                            <div class="d-flex justify-content-around">
                                <img src="{{ app.user.avatar }}"
                                     class="user-settings-avatar-preview-image"/>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </main>

{% endblock body %}