{% extends 'base.html.twig' %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block title %}
    {{ 'lang.myAccount' | trans }}
{% endblock %}

{% block footer %} {% endblock %}

{% block body %}
    {% if app.user.isMainAccount or is_granted('ROLE_ADMIN') %}
        {% include 'general/components/navigation_menu_main.html.twig' with { 'activeTab': 'account' } %}
    {% endif %}

    <div class="account-container">
        <div class="container info-account p-4">
            <div class="row">
                <div class="col-12">
                    <div class="info-account-section">

                        <div class="main-section">
                            {{ form_start(form) }}
                            <div class="wrap-account-image">
                                {% if avatarFileName %}
                                    <div class="avatar-with-delete-button mb-2">
                                        <label for="{{ form.avatar.vars.id }}">
                                            <img
                                                    id="avatarPreview"
                                                    class="account-image"
                                                    style="background-repeat: no-repeat; background-position: center; background-size: 100%;"
                                                    src="{{ asset('images/' ~ app.user.avatarFileName) }}"
                                                    alt=""/>
                                        </label>
                                        <div id="del_account_image" class="change-account-image">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10 15L10 12" stroke="currentColor" stroke-width="2"
                                                      stroke-linecap="round"/>
                                                <path d="M14 15L14 12" stroke="currentColor" stroke-width="2"
                                                      stroke-linecap="round"/>
                                                <path d="M3 7H21V7C20.0681 7 19.6022 7 19.2346 7.15224C18.7446 7.35523 18.3552 7.74458 18.1522 8.23463C18 8.60218 18 9.06812 18 10V16C18 17.8856 18 18.8284 17.4142 19.4142C16.8284 20 15.8856 20 14 20H10C8.11438 20 7.17157 20 6.58579 19.4142C6 18.8284 6 17.8856 6 16V10C6 9.06812 6 8.60218 5.84776 8.23463C5.64477 7.74458 5.25542 7.35523 4.76537 7.15224C4.39782 7 3.93188 7 3 7V7Z"
                                                      stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                                <path d="M10.0681 3.37059C10.1821 3.26427 10.4332 3.17033 10.7825 3.10332C11.1318 3.03632 11.5597 3 12 3C12.4403 3 12.8682 3.03632 13.2175 3.10332C13.5668 3.17033 13.8179 3.26427 13.9319 3.37059"
                                                      stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                            </svg>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="avatar-with-delete-button mb-2">
                                        <label for="{{ form.avatar.vars.id }}">
                                            <div class="account-image">
                                                <div id="default-account-image" class="image-text font-50">
                                                    {{ app.user.firstname|slice(0, 1)|upper }}{{ app.user.lastname|slice(0, 1)|upper }}
                                                </div>
                                                <img
                                                        style="display: none"
                                                        class="account-image"
                                                        id="avatarPreview"
                                                />
                                            </div>
                                        </label>


                                        <label for="{{ form.avatar.vars.id }}" class="change-account-image">
                                            <svg class="" width="24" height="24" viewBox="-6 -6 50 50"
                                                 fill="currentColor"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M20.6704 7.99651L26.5883 2.07861C27.9216 0.74528 28.5883 0.0786133 29.4167 0.0786133C30.2451 0.0786133 30.9118 0.74528 32.2451 2.07861L34.9216 4.7551C36.2549 6.08843 36.9216 6.75509 36.9216 7.58352C36.9216 8.41195 36.2549 9.07861 34.9216 10.4119L29.0486 16.285C25.595 14.2634 22.7166 11.4063 20.6704 7.99651ZM19.2161 9.45072L3.18973 25.4771C2.76467 25.9022 2.55214 26.1147 2.4124 26.3758C2.27267 26.6369 2.21372 26.9317 2.09583 27.5211L0.397104 36.0148C0.330582 36.3474 0.297321 36.5137 0.391929 36.6083C0.486537 36.7029 0.652842 36.6696 0.985452 36.6031L9.4791 34.9044C10.0686 34.7865 10.3633 34.7275 10.6244 34.5878C10.8855 34.4481 11.098 34.2355 11.5231 33.8105L27.5906 17.7429C24.1878 15.6573 21.3236 12.8133 19.2161 9.45072Z"
                                                      fill="currentColor"></path>
                                            </svg>
                                        </label>
                                    </div>
                                {% endif %}

                                <div class="text-center">
                                    {{ form_errors(form.avatar) }}
                                </div>

                                {% if avatarFileName %}
                                    <div class="display-flex-center"
                                         style="width: 100%">
                                        {{ form_label(form.avatar) }}
                                    </div>
                                {% endif %}
                            </div>
                            <div class="text-center mt-1">
                                <button id="saveButton" class="button button-filled display-none">
                                    {{ 'lang.save' | trans }}
                                </button>
                            </div>
                            <div class="d-none">
                                {{ form_widget(form.avatar) }}
                                <input type="hidden" name="{{ form._token.vars.full_name }}"
                                       value="{{ form._token.vars.value }}">
                                <input id="id" value="{{ user_setting.id }}">
                                <div id="output_del_account_image"></div>
                            </div>
                            {{ form_end(form) }}

                            <ul>
                                <li>
                                    <h3>{{ 'lang.name' | trans }}</h3>
                                    {{ app.user.firstname }} {{ app.user.lastname }}
                                    {#                                <p> #}
                                    {#                                    <a href="" class="ghost-text"> #}
                                    {#                                        {{ 'lang.changeName' | trans }}</a> #}
                                    {#                                </p> #}
                                </li>
                                <li>
                                    <h3>{{ 'lang.email' | trans }}</h3>
                                    {{ app.user.email }}
                                </li>
                                {% if company is defined %}
                                    <li>
                                        <h3>{{ 'lang.company' | trans }}</h3>
                                        {{ company }}
                                    </li>
                                {% endif %}
                            </ul>
                        </div>

                        <ul class="ul-border">
                            <li>
                                <h3 class="lang-title">{{ 'lang.lang'|trans }}</h3>
                                <form method="get" class="language-switcher d-flex justify-content-around">
                                    {% set current_route = app.request.attributes.get('_route') %}
                                    {% set current_params = app.request.query.all %}
                                    {% set current_locale = app.request.locale %}

                                    {% for locale in ['de', 'en', 'es'] %}
                                        <label class="language-option">
                                            <input type="radio" name="language" value="{{ locale }}" {% if current_locale == locale %}checked{% endif %}
                                                   onchange="window.location.href='{{ path(current_route, current_params|merge({'_locale': locale})) }}'">
                                            <span class="custom-radio"></span>
                                            {{ locale|upper }}
                                        </label>
                                    {% endfor %}
                                </form>
                            </li>
                            <li>
                                <h3>{{ 'lang.twoFactorAuth' | trans }}</h3>
                                <div class="color-site-toggle">
                                    <label class="switch">
                                        <input type="checkbox" id="two-factor-toggle"
                                               data-user-id="{{ app.user.id }}"
                                               {% if app.user.isEmailAuthEnabled %}checked{% endif %}>
                                        <span class="slider"></span>
                                        <span class="moon">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <rect x="5" y="11" width="14" height="10" rx="2"/>
                                                <path d="M12 17V17.01M17 11V7C17 4.24 14.76 2 12 2C9.24 2 7 4.24 7 7V8"/>
                                            </svg>
                                        </span>
                                        <span class="sun">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M18 8H17V6C17 3.24 14.76 1 12 1S7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM12 17C10.9 17 10 16.1 10 15S10.9 13 12 13S14 13.9 14 15S13.1 17 12 17ZM15.1 8H8.9V6C8.9 4.29 10.29 2.9 12 2.9S15.1 4.29 15.1 6V8Z"/>
                                            </svg>
                                        </span>
                                    </label>
                                </div>
                            </li>

{#                            <li>#}
{#                                <h3 class="design-title">Design</h3>#}
{#                                <div class="design-toggle-wrapper">#}
{#                                    <div class="mode-option light-mode" data-mode="light">#}
{#                                        <span class="custom-radio"></span>#}
{#                                        <span class="label-text">LIGHT MODE</span>#}
{#                                    </div>#}
{#                                    <div class="mode-option dark-mode" data-mode="dark">#}
{#                                        <span class="custom-radio"></span>#}
{#                                        <span class="label-text">DARK MODE</span>#}
{#                                    </div>#}
{#                                    <input type="checkbox" id="theme-toggle" hidden>#}
{#                                </div>#}
{#                            </li>#}

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <input type="hidden" id="delete-avatar-url" value="{{ path('app_account_delete_image', {'id': app.user.id, 'type': 'avatar'}) }}">
    <input type="hidden" id="toggle-2fa-url" value="{{ path('app_account_toggle_2fa') }}">

    {{ encore_entry_script_tags('themeToggle') }}
    {{ encore_entry_script_tags('account_settings') }}
{% endblock %}