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

{% block title %}
    {{ 'lang.myAccount' | trans }}
{% endblock %}
{% block body %}
    {% if app.user.isMainAccount or is_granted('ROLE_ADMIN') %}
        <div class="section-navbar d-none d-lg-flex h-auto">
            <div class="container p-0">
                <ul class="nav-menu">
                    <li>
                        <a class="link" href="{{ path('app_account') }}">
                            <svg class="svg-navbar-menu" width="50" height="50" viewBox="0 0 50 50" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M41.0987 42.5983C40.1491 39.9403 38.0567 37.5917 35.1459 35.9166C32.2352 34.2415 28.6688 33.3335 24.9999 33.3335C21.331 33.3335 17.7646 34.2415 14.8539 35.9166C11.9432 37.5917 9.85074 39.9403 8.90116 42.5983"
                                      stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <circle cx="25.0001" cy="16.6668" r="8.33333" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round"/>
                            </svg>
                            {{ 'lang.myAccount' | trans }}
                        </a>
                    </li>

                    {% if license == 'free' %}
                        <li>
                            <button type="button" class="button-no-style link display-flex-center disabled-custom-style"
                                    id="roleUserPopoverButton"
                                    data-bs-toggle="popover"
                                    data-bs-content="
                                    <div class='popover-body'>
                                        <p>{{ 'lang.addUsersBusinessPlan' | trans }}</p>
                                        <div class='display-flex-center'>
                                            <a href='{{ path('app_price') }}'>
                                                <button class='button button-gradient display-flex-center'>{{ 'lang.updatePlan' | trans }}</button>
                                            </a>
                                        </div>
                                    </div>"
                                    data-bs-placement="bottom">
                                <svg class="svg-navbar-menu" width="50" height="50" viewBox="0 0 50 50" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="25.0001" cy="16.6668" r="7.33333" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round"/>
                                    <path d="M30.8701 16.125C31.5663 14.9192 32.713 14.0393 34.0579 13.6789C35.4029 13.3185 36.8359 13.5072 38.0417 14.2034C39.2476 14.8996 40.1275 16.0463 40.4879 17.3912C40.8482 18.7361 40.6596 20.1692 39.9634 21.375C39.2672 22.5808 38.1205 23.4607 36.7755 23.8211C35.4306 24.1815 33.9976 23.9928 32.7917 23.2966C31.5859 22.6004 30.706 21.4537 30.3456 20.1088C29.9853 18.7639 30.1739 17.3308 30.8701 16.125L30.8701 16.125Z"
                                          stroke="currentColor" stroke-width="2"/>
                                    <path d="M10.0366 16.125C10.7328 14.9192 11.8795 14.0393 13.2245 13.6789C14.5694 13.3185 16.0024 13.5072 17.2083 14.2034C18.4141 14.8996 19.294 16.0463 19.6544 17.3912C20.0147 18.7361 19.8261 20.1692 19.1299 21.375C18.4337 22.5808 17.287 23.4607 15.9421 23.8211C14.5971 24.1815 13.1641 23.9928 11.9583 23.2966C10.7524 22.6004 9.87252 21.4537 9.51214 20.1088C9.15177 18.7639 9.34043 17.3308 10.0366 16.125L10.0366 16.125Z"
                                          stroke="currentColor" stroke-width="2"/>
                                    <path d="M35.1701 37.4998L34.1898 37.6973L34.3514 38.4998H35.1701V37.4998ZM43.5248 36.3934L42.5557 36.6401L43.5248 36.3934ZM30.7935 30.6468L30.1886 29.8504L29.032 30.7289L30.2653 31.4959L30.7935 30.6468ZM42.6173 36.4998H35.1701V38.4998H42.6173V36.4998ZM42.5557 36.6401C42.5531 36.6299 42.5508 36.608 42.5572 36.5811C42.5632 36.5558 42.5743 36.5366 42.5848 36.524C42.6058 36.4989 42.6236 36.4998 42.6173 36.4998V38.4998C43.7935 38.4998 44.8218 37.4349 44.4939 36.1467L42.5557 36.6401ZM35.4168 30.1665C37.8859 30.1665 39.4995 31.2359 40.5913 32.5647C41.7106 33.927 42.2842 35.5737 42.5557 36.6401L44.4939 36.1467C44.1883 34.9463 43.5206 32.9795 42.1366 31.2951C40.7251 29.5772 38.5732 28.1665 35.4168 28.1665V30.1665ZM31.3983 31.4431C32.3847 30.6939 33.6804 30.1665 35.4168 30.1665V28.1665C33.2366 28.1665 31.5173 28.8412 30.1886 29.8504L31.3983 31.4431ZM30.2653 31.4959C32.8036 33.0746 33.8032 35.7775 34.1898 37.6973L36.1504 37.3024C35.7201 35.1654 34.5492 31.805 31.3216 29.7976L30.2653 31.4959Z"
                                          fill="currentColor"/>
                                    <path d="M19.2067 30.6468L19.7348 31.4959L20.9681 30.7289L19.8115 29.8504L19.2067 30.6468ZM6.47534 36.3934L5.50625 36.1466L6.47534 36.3934ZM14.8299 37.4998V38.4998H15.6486L15.8103 37.6973L14.8299 37.4998ZM14.5834 30.1665C16.3197 30.1665 17.6154 30.6939 18.6018 31.4431L19.8115 29.8504C18.4828 28.8412 16.7636 28.1665 14.5834 28.1665V30.1665ZM7.44443 36.6401C7.71591 35.5737 8.28948 33.927 9.40883 32.5647C10.5007 31.2359 12.1143 30.1665 14.5834 30.1665V28.1665C11.427 28.1665 9.27508 29.5772 7.86356 31.295C6.47953 32.9795 5.81184 34.9463 5.50625 36.1466L7.44443 36.6401ZM7.38281 36.4998C7.37651 36.4998 7.39431 36.4989 7.41528 36.524C7.42581 36.5366 7.43688 36.5558 7.44287 36.5811C7.44927 36.608 7.44701 36.6299 7.44443 36.6401L5.50625 36.1466C5.17829 37.4349 6.20656 38.4998 7.38281 38.4998V36.4998ZM14.8299 36.4998H7.38281V38.4998H14.8299V36.4998ZM15.8103 37.6973C16.1969 35.7775 17.1965 33.0746 19.7348 31.4959L18.6785 29.7976C15.4509 31.8049 14.28 35.1654 13.8496 37.3024L15.8103 37.6973Z"
                                          fill="currentColor"/>
                                    <path d="M24.9999 29.1665C33.4268 29.1665 35.0365 35.9837 35.344 38.5881C35.4087 39.1366 34.9689 39.5832 34.4166 39.5832H15.5833C15.031 39.5832 14.5911 39.1366 14.6559 38.5881C14.9633 35.9837 16.573 29.1665 24.9999 29.1665Z"
                                          stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                                <span>{{ 'lang.roleUser' | trans }}</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor "
                                     class="bi bi-lock-fill" viewBox="0 0 16 16">
                                    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"/>
                                </svg>
                            </button>
                        </li>

                        <li>
                            <button type="button" class="button-no-style link display-flex-center disabled-custom-style"
                                    id="settingsPopoverButton"
                                    data-bs-toggle="popover"
                                    data-bs-content="
                                    <div class='popover-body'>
                                        <p>{{ 'lang.accessSettingsUpgrade' | trans }}</p>
                                        <div class='display-flex-center'>
                                            <a href='{{ path('app_price') }}'>
                                                <button class='button button-gradient display-flex-center'>{{ 'lang.updatePlan' | trans }}</button>
                                            </a>
                                        </div>
                                    </div>"
                                    data-bs-placement="bottom">
                                <svg class="svg-navbar-menu" width="36" height="36" 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"/>
                                </svg>
                                <span>
                                {{ 'lang.settings' | trans }}
                            </span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill=" currentColor "
                                     class="bi bi-lock-fill" viewBox="0 0 16 16">
                                    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"/>
                                </svg>
                            </button>
                        </li>

                        <li>
                            <button type="button" class="button-no-style link display-flex-center disabled-custom-style"
                                    id="importPopoverButton"
                                    data-bs-toggle="popover"
                                    data-bs-content="
                                    <div class='popover-body'>
                                        <p>{{ 'lang.importContactsUpgrade' | trans }}</p>
                                        <div class='display-flex-center'>
                                            <a href='{{ path('app_price') }}'>
                                                <button class='button button-gradient display-flex-center'>{{ 'lang.updatePlan' | trans }}</button>
                                            </a>
                                        </div>
                                    </div>"
                                    data-bs-placement="bottom">
                                <svg class="svg-navbar-menu" width="37" height="37" viewBox="0 0 50 49" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.9135 29.8576C11.7444 32.9585 13.5753 35.6986 16.1221 37.6529C18.669 39.6072 21.7896 40.6665 24.9999 40.6665C28.2102 40.6665 31.3308 39.6072 33.8777 37.6529C36.4246 35.6986 38.2555 32.9585 39.0863 29.8576"
                                          stroke="currentColor" stroke-width="2"/>
                                    <path d="M24.9999 26.0835L24.3752 26.8644L24.9999 27.3641L25.6246 26.8644L24.9999 26.0835ZM25.9999 7.3335C25.9999 6.78121 25.5522 6.3335 24.9999 6.3335C24.4476 6.3335 23.9999 6.78121 23.9999 7.3335L25.9999 7.3335ZM13.9586 18.531L24.3752 26.8644L25.6246 25.3026L15.2079 16.9693L13.9586 18.531ZM25.6246 26.8644L36.0413 18.531L34.7919 16.9693L24.3752 25.3026L25.6246 26.8644ZM25.9999 26.0835L25.9999 7.3335L23.9999 7.3335L23.9999 26.0835L25.9999 26.0835Z"
                                          fill="currentColor"/>
                                </svg>
                                <span>
                                {{ 'lang.import' | trans }}
                            </span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill=" currentColor "
                                     class="bi bi-lock-fill" viewBox="0 0 16 16">
                                    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"/>
                                </svg>
                            </button>
                        </li>
                    {% elseif license == 'business' %}

                        <li>
                            <a class="link" href="{{ path('app_user_index') }}">
                                <svg class="svg-navbar-menu" width="50" height="50" viewBox="0 0 50 50" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="25.0001" cy="16.6668" r="7.33333" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round"/>
                                    <path d="M30.8701 16.125C31.5663 14.9192 32.713 14.0393 34.0579 13.6789C35.4029 13.3185 36.8359 13.5072 38.0417 14.2034C39.2476 14.8996 40.1275 16.0463 40.4879 17.3912C40.8482 18.7361 40.6596 20.1692 39.9634 21.375C39.2672 22.5808 38.1205 23.4607 36.7755 23.8211C35.4306 24.1815 33.9976 23.9928 32.7917 23.2966C31.5859 22.6004 30.706 21.4537 30.3456 20.1088C29.9853 18.7639 30.1739 17.3308 30.8701 16.125L30.8701 16.125Z"
                                          stroke="currentColor" stroke-width="2"/>
                                    <path d="M10.0366 16.125C10.7328 14.9192 11.8795 14.0393 13.2245 13.6789C14.5694 13.3185 16.0024 13.5072 17.2083 14.2034C18.4141 14.8996 19.294 16.0463 19.6544 17.3912C20.0147 18.7361 19.8261 20.1692 19.1299 21.375C18.4337 22.5808 17.287 23.4607 15.9421 23.8211C14.5971 24.1815 13.1641 23.9928 11.9583 23.2966C10.7524 22.6004 9.87252 21.4537 9.51214 20.1088C9.15177 18.7639 9.34043 17.3308 10.0366 16.125L10.0366 16.125Z"
                                          stroke="currentColor" stroke-width="2"/>
                                    <path d="M35.1701 37.4998L34.1898 37.6973L34.3514 38.4998H35.1701V37.4998ZM43.5248 36.3934L42.5557 36.6401L43.5248 36.3934ZM30.7935 30.6468L30.1886 29.8504L29.032 30.7289L30.2653 31.4959L30.7935 30.6468ZM42.6173 36.4998H35.1701V38.4998H42.6173V36.4998ZM42.5557 36.6401C42.5531 36.6299 42.5508 36.608 42.5572 36.5811C42.5632 36.5558 42.5743 36.5366 42.5848 36.524C42.6058 36.4989 42.6236 36.4998 42.6173 36.4998V38.4998C43.7935 38.4998 44.8218 37.4349 44.4939 36.1467L42.5557 36.6401ZM35.4168 30.1665C37.8859 30.1665 39.4995 31.2359 40.5913 32.5647C41.7106 33.927 42.2842 35.5737 42.5557 36.6401L44.4939 36.1467C44.1883 34.9463 43.5206 32.9795 42.1366 31.2951C40.7251 29.5772 38.5732 28.1665 35.4168 28.1665V30.1665ZM31.3983 31.4431C32.3847 30.6939 33.6804 30.1665 35.4168 30.1665V28.1665C33.2366 28.1665 31.5173 28.8412 30.1886 29.8504L31.3983 31.4431ZM30.2653 31.4959C32.8036 33.0746 33.8032 35.7775 34.1898 37.6973L36.1504 37.3024C35.7201 35.1654 34.5492 31.805 31.3216 29.7976L30.2653 31.4959Z"
                                          fill="currentColor"/>
                                    <path d="M19.2067 30.6468L19.7348 31.4959L20.9681 30.7289L19.8115 29.8504L19.2067 30.6468ZM6.47534 36.3934L5.50625 36.1466L6.47534 36.3934ZM14.8299 37.4998V38.4998H15.6486L15.8103 37.6973L14.8299 37.4998ZM14.5834 30.1665C16.3197 30.1665 17.6154 30.6939 18.6018 31.4431L19.8115 29.8504C18.4828 28.8412 16.7636 28.1665 14.5834 28.1665V30.1665ZM7.44443 36.6401C7.71591 35.5737 8.28948 33.927 9.40883 32.5647C10.5007 31.2359 12.1143 30.1665 14.5834 30.1665V28.1665C11.427 28.1665 9.27508 29.5772 7.86356 31.295C6.47953 32.9795 5.81184 34.9463 5.50625 36.1466L7.44443 36.6401ZM7.38281 36.4998C7.37651 36.4998 7.39431 36.4989 7.41528 36.524C7.42581 36.5366 7.43688 36.5558 7.44287 36.5811C7.44927 36.608 7.44701 36.6299 7.44443 36.6401L5.50625 36.1466C5.17829 37.4349 6.20656 38.4998 7.38281 38.4998V36.4998ZM14.8299 36.4998H7.38281V38.4998H14.8299V36.4998ZM15.8103 37.6973C16.1969 35.7775 17.1965 33.0746 19.7348 31.4959L18.6785 29.7976C15.4509 31.8049 14.28 35.1654 13.8496 37.3024L15.8103 37.6973Z"
                                          fill="currentColor"/>
                                    <path d="M24.9999 29.1665C33.4268 29.1665 35.0365 35.9837 35.344 38.5881C35.4087 39.1366 34.9689 39.5832 34.4166 39.5832H15.5833C15.031 39.5832 14.5911 39.1366 14.6559 38.5881C14.9633 35.9837 16.573 29.1665 24.9999 29.1665Z"
                                          stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                                {{ 'lang.roleUser' | trans }}
                            </a>
                        </li>

                    {% elseif license == 'pro' %}
                        <li>
                            <button type="button" class="button-no-style link display-flex-center disabled-custom-style"
                                    id="roleUserPopoverButton"
                                    data-bs-toggle="popover"
                                    data-bs-content="
                                    <div class='popover-body'>
                                        <p>{{ 'lang.addUsersBusinessPlan' | trans }}</p>
                                        <div class='display-flex-center'>
                                            <a href='{{ path('app_price') }}'>
                                                <button class='button button-gradient display-flex-center'>{{ 'lang.updatePlan' | trans }}</button>
                                            </a>
                                        </div>
                                    </div>"
                                    data-bs-placement="bottom">
                                <svg class="svg-navbar-menu" width="50" height="50" viewBox="0 0 50 50" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="25.0001" cy="16.6668" r="7.33333" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round"/>
                                    <path d="M30.8701 16.125C31.5663 14.9192 32.713 14.0393 34.0579 13.6789C35.4029 13.3185 36.8359 13.5072 38.0417 14.2034C39.2476 14.8996 40.1275 16.0463 40.4879 17.3912C40.8482 18.7361 40.6596 20.1692 39.9634 21.375C39.2672 22.5808 38.1205 23.4607 36.7755 23.8211C35.4306 24.1815 33.9976 23.9928 32.7917 23.2966C31.5859 22.6004 30.706 21.4537 30.3456 20.1088C29.9853 18.7639 30.1739 17.3308 30.8701 16.125L30.8701 16.125Z"
                                          stroke="currentColor" stroke-width="2"/>
                                    <path d="M10.0366 16.125C10.7328 14.9192 11.8795 14.0393 13.2245 13.6789C14.5694 13.3185 16.0024 13.5072 17.2083 14.2034C18.4141 14.8996 19.294 16.0463 19.6544 17.3912C20.0147 18.7361 19.8261 20.1692 19.1299 21.375C18.4337 22.5808 17.287 23.4607 15.9421 23.8211C14.5971 24.1815 13.1641 23.9928 11.9583 23.2966C10.7524 22.6004 9.87252 21.4537 9.51214 20.1088C9.15177 18.7639 9.34043 17.3308 10.0366 16.125L10.0366 16.125Z"
                                          stroke="currentColor" stroke-width="2"/>
                                    <path d="M35.1701 37.4998L34.1898 37.6973L34.3514 38.4998H35.1701V37.4998ZM43.5248 36.3934L42.5557 36.6401L43.5248 36.3934ZM30.7935 30.6468L30.1886 29.8504L29.032 30.7289L30.2653 31.4959L30.7935 30.6468ZM42.6173 36.4998H35.1701V38.4998H42.6173V36.4998ZM42.5557 36.6401C42.5531 36.6299 42.5508 36.608 42.5572 36.5811C42.5632 36.5558 42.5743 36.5366 42.5848 36.524C42.6058 36.4989 42.6236 36.4998 42.6173 36.4998V38.4998C43.7935 38.4998 44.8218 37.4349 44.4939 36.1467L42.5557 36.6401ZM35.4168 30.1665C37.8859 30.1665 39.4995 31.2359 40.5913 32.5647C41.7106 33.927 42.2842 35.5737 42.5557 36.6401L44.4939 36.1467C44.1883 34.9463 43.5206 32.9795 42.1366 31.2951C40.7251 29.5772 38.5732 28.1665 35.4168 28.1665V30.1665ZM31.3983 31.4431C32.3847 30.6939 33.6804 30.1665 35.4168 30.1665V28.1665C33.2366 28.1665 31.5173 28.8412 30.1886 29.8504L31.3983 31.4431ZM30.2653 31.4959C32.8036 33.0746 33.8032 35.7775 34.1898 37.6973L36.1504 37.3024C35.7201 35.1654 34.5492 31.805 31.3216 29.7976L30.2653 31.4959Z"
                                          fill="currentColor"/>
                                    <path d="M19.2067 30.6468L19.7348 31.4959L20.9681 30.7289L19.8115 29.8504L19.2067 30.6468ZM6.47534 36.3934L5.50625 36.1466L6.47534 36.3934ZM14.8299 37.4998V38.4998H15.6486L15.8103 37.6973L14.8299 37.4998ZM14.5834 30.1665C16.3197 30.1665 17.6154 30.6939 18.6018 31.4431L19.8115 29.8504C18.4828 28.8412 16.7636 28.1665 14.5834 28.1665V30.1665ZM7.44443 36.6401C7.71591 35.5737 8.28948 33.927 9.40883 32.5647C10.5007 31.2359 12.1143 30.1665 14.5834 30.1665V28.1665C11.427 28.1665 9.27508 29.5772 7.86356 31.295C6.47953 32.9795 5.81184 34.9463 5.50625 36.1466L7.44443 36.6401ZM7.38281 36.4998C7.37651 36.4998 7.39431 36.4989 7.41528 36.524C7.42581 36.5366 7.43688 36.5558 7.44287 36.5811C7.44927 36.608 7.44701 36.6299 7.44443 36.6401L5.50625 36.1466C5.17829 37.4349 6.20656 38.4998 7.38281 38.4998V36.4998ZM14.8299 36.4998H7.38281V38.4998H14.8299V36.4998ZM15.8103 37.6973C16.1969 35.7775 17.1965 33.0746 19.7348 31.4959L18.6785 29.7976C15.4509 31.8049 14.28 35.1654 13.8496 37.3024L15.8103 37.6973Z"
                                          fill="currentColor"/>
                                    <path d="M24.9999 29.1665C33.4268 29.1665 35.0365 35.9837 35.344 38.5881C35.4087 39.1366 34.9689 39.5832 34.4166 39.5832H15.5833C15.031 39.5832 14.5911 39.1366 14.6559 38.5881C14.9633 35.9837 16.573 29.1665 24.9999 29.1665Z"
                                          stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                                <span>
                                {{ 'lang.roleUser' | trans }}
                            </span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-lock-fill" viewBox="0 0 16 16">
                                    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"/>
                                </svg>
                            </button>
                        </li>
                    {% endif %}

                    {% if license == 'business' or license == 'pro' %}
                        <li>
                            <a class="link" href="{{ path('app_user_settings_edit', { id: id }) }}">
                                <svg class="svg-navbar-menu" width="36" height="36" 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"/>
                                </svg>
                                {{ 'lang.settings' | trans }}
                            </a>
                        </li>

                        <li>
                            <a class="link" href="{{ path('app_import_index') }}">
                                <svg class="svg-navbar-menu" width="37" height="37" viewBox="0 0 50 49" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.9135 29.8576C11.7444 32.9585 13.5753 35.6986 16.1221 37.6529C18.669 39.6072 21.7896 40.6665 24.9999 40.6665C28.2102 40.6665 31.3308 39.6072 33.8777 37.6529C36.4246 35.6986 38.2555 32.9585 39.0863 29.8576"
                                          stroke="currentColor" stroke-width="2"/>
                                    <path d="M24.9999 26.0835L24.3752 26.8644L24.9999 27.3641L25.6246 26.8644L24.9999 26.0835ZM25.9999 7.3335C25.9999 6.78121 25.5522 6.3335 24.9999 6.3335C24.4476 6.3335 23.9999 6.78121 23.9999 7.3335L25.9999 7.3335ZM13.9586 18.531L24.3752 26.8644L25.6246 25.3026L15.2079 16.9693L13.9586 18.531ZM25.6246 26.8644L36.0413 18.531L34.7919 16.9693L24.3752 25.3026L25.6246 26.8644ZM25.9999 26.0835L25.9999 7.3335L23.9999 7.3335L23.9999 26.0835L25.9999 26.0835Z"
                                          fill="currentColor"/>
                                </svg>
                                {{ 'lang.import' | trans }}
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    {% endif %}

    <div class="account-container">
        <div class="container info-account p-4">
            <div class="row">
                <div class="col-12 col-lg-6 d-lg-flex justify-content-end">
                    {{ 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 %}
                            {#                            <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> #}

                            <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) }}
                </div>

                <div class="col-12 col-lg-6">
                    <div class="info-account-section">
                        <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>
                        </ul>
                        <ul class="ul-border">

                            {% if company is defined %}
                                <li>
                                    <h3>{{ 'lang.company' | trans }}</h3>
                                    {{ company }}
                                </li>
                            {% endif %}

                            <li>
                                <h3>{{ 'lang.lang'|trans }}</h3>
                                <div class="d-flex justify-content-around">
                                    {% set current_route = app.request.attributes.get('_route') %}
                                    {% set current_params = app.request.query.all %}
                                    <a class="nav-link m-2"
                                       href="{{ path(current_route, current_params|merge({'_locale': 'es'})) }}">ES</a>
                                    <a class="nav-link m-2"
                                       href="{{ path(current_route, current_params|merge({'_locale': 'de'})) }}">DE</a>
                                    <a class="nav-link m-2"
                                       href="{{ path(current_route, current_params|merge({'_locale': 'en'})) }}">EN</a>
                                    <a class="nav-link m-2"
                                       href="{{ path(current_route, current_params|merge({'_locale': 'ru'})) }}">RU</a>
                                </div>
                            </li>
                            <li>
                                <h3>Design</h3>
                                <div class="color-site-toggle">
                                    <label class="switch">
                                        <input type="checkbox" id="theme-toggle">
                                        <span class="slider"></span>
                                        <span class="moon">
                                            <img src="/images/Moon.svg" alt="dark">
                                        </span>
                                        <span class="sun">
                                            <img src="/images/Sun.svg" alt="light">
                                        </span>
                                    </label>
                                </div>
                            </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>
                        </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 %}