{% block style %}
    {% if not app.user %}
        <style>
            .open-menu::after {
                display: none !important;
            }
        </style>
    {% endif %}
{% endblock %}

<nav id="navbar" class="navbar custom-navbar"
        {% if not app.user %}
    style=" background: #202020; color: #FFFFFF !important;"
        {% endif %}>
    <div class="navbar-container">
        <div class="logo">
            {% if not app.user %}
                <a href="{{ path('app_home') }}">
                    <div class="logo-wrap">
                        <img src="/images/cumas_logo.svg" alt="Cumas Logo"/>
                        <div class="d-flex"
                             style="color: white">
                            {#                        because letter space #}
                            <span>Filetransfe</span>r
                        </div>
                    </div>
                </a>
            {% endif %}
            {% if app.user %}
                {% if is_granted('ROLE_GUEST') %}
                    <a href="{{ path('app_guest') }}">
                        <div class="logo-wrap">
                            <img src="/images/cumas_logo.svg" alt="Logo"/>
                            <div class="d-flex">
                                {# because letter space #}
                                <span>Filetransfe</span>r
                            </div>
                        </div>
                    </a>
                {% else %}
                    <a href="{{ path('app_upload_new') }}">
                        <div class="logo-wrap">
                            <img src="/images/cumas_logo.svg" alt="Logo"/>
                            <div class="d-flex">
                                {# because letter space #}
                                <span>Filetransfe</span>r
                            </div>
                        </div>
                    </a>
                {% endif %}


            {% endif %}
        </div>

        <div class="link-wrap">
            {% if is_granted('ROLE_GUEST') %}
                <div class="link-wrap d-none d-md-flex">
                    <a href="{{ path('app_guest_upload_index') }}" class="nav-link">{{ 'lang.myUploads' | trans }}</a>
                </div>
            {% endif %}
            {% if not app.user %}
                {#             LINKS #}
                <div class="link-wrap d-none d-md-flex">
                    <a href="{{ path('app_features') }}"
                       class="nav-link nav-link-dark">{{ 'lang.features' | trans }}</a>
                    <a href="{{ path('app_price') }}" class="nav-link nav-link-dark">{{ 'lang.price' | trans }}</a>
                </div>
            {% endif %}
            {% if app.user %}
                {% if is_granted('ROLE_GUEST') %}
                {% else %}
                    {% if license == 'pro' or license == 'business' %}
                        <div class="link-wrap d-none d-lg-flex ">
                            <a class="nav-link" href="{{ path('app_contact_index') }}">
                                {{ 'lang.myContacts' | trans }}
                            </a>
                            <a class="nav-link" href="{{ path('app_upload_index') }}">
                                {{ 'lang.myUploads' | trans }}
                            </a>
                        </div>

                    {% elseif license == 'free' %}
                        <div class="link-wrap d-none d-lg-flex">
                            <button type="button" class="button-no-style" id="contactPopoverButton"
                                    data-bs-toggle="popover"
                                    data-bs-content="
                            <div class='popover-body'>
                                <p>{{ 'lang.addContactsUpgrade' | 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>">
                        <span class="nav-link display-flex-center">
                            {{ 'lang.myContacts' | trans }}
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill=" currentColor "
                                     class="bi bi-lock-fill svg-navbar" 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>
                            </span>
                            </button>
                            <button type="button" class="button-no-style" id="uploadPopoverButton"
                                    data-bs-toggle="popover"
                                    data-bs-content="
                            <div class='popover-body'>
                                <p>{{ 'lang.viewSentFilesUpgrade' | 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>">
                            <span class="nav-link display-flex-center">
                                {{ 'lang.myUploads' | trans }}
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill=" currentColor "
                                     class="bi bi-lock-fill svg-navbar" 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>
                            </span>
                            </button>
                        </div>
                    {% endif %}
                {% endif %}

                {% if is_granted('ROLE_GLOBAL_ADMIN') %}
                    <a class="nav-link" href="{{ path('app_adm') }}">Admin-Panel</a>
                {% endif %}
            {% endif %}
        </div>
        {% if not app.user %}
            <div class="buttons">
                {#             BUTTONS #}
                <div class="d-flex">
                    <a href="{{ path('app_login') }}"
                       class="button button-login ">{{ 'cta_login' | trans }}
                    </a>
                    <a href="{{ path('app_register') }}"
                       class="button button-gradient  d-none d-md-flex align-items-center">{{ 'cta_register' | trans }}
                    </a>
                </div>
            </div>
        {% endif %}

        {% if app.user %}

            {% if is_granted('IS_IMPERSONATOR') %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false">
                        Benutzer wechseln aufheben
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item"
                               href="{{ path('app_adm', {'_switch_user_2221DkncdsUtrdiuyYj485sasadligxmy48h48dSFfF545duTnklla': '_exit'}) }}">
                                zurück zu meinem Konto - Dashboard
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item"
                               href="{{ path('login_switch_user', {'_switch_user_2221DkncdsUtrdiuyYj485sasadligxmy48h48dSFfF545duTnklla': '_exit'}) }}">
                                zurück zu meinem Konto - Benutzer wechseln
                            </a>
                        </li>

                    </ul>
                </li>
            {% endif %}

            {% if is_granted('ROLE_GUEST') %}

                <a class="text-color nav-link" href="{{ path('app_logout') }}">{{ 'cta_logout' | trans }}</a>

            {% else %}
                <div id="openMenu" class="open-menu">
                    {% if avatarFileName is defined and avatarFileName is not null and avatarFileName is not empty %}
                        <img
                                style="background-repeat: no-repeat; background-position: center; background-size: 100%;"
                                src="{{ asset('images/' ~ avatarFileName) }}"
                                alt=""/>
                    {% else %}
                        <div class="empty-account-image-sm">
                            <div class="image-text">
                                {{ app.user.firstname|slice(0, 1)|upper }}{{ app.user.lastname|slice(0, 1)|upper }}
                            </div>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        {% endif %}

        {% if not app.user %}
            <div id="openMenu" class="open-menu d-block d-md-none" style="margin-left: 10px">
                <div class="d-flex d-md-none">
                    <svg width="30" height="32" viewBox="0 0 30 32" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                        <path d="M23.75 9.05176H6.25" stroke="#E2CECE" stroke-width="2" stroke-linecap="round"/>
                        <path d="M23.75 15.5171H11.25" stroke="#E2CECE" stroke-width="2" stroke-linecap="round"/>
                        <path d="M23.75 21.9829H16.25" stroke="#E2CECE" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </div>
            </div>
        {% endif %}
    </div>


</nav>


{% block javascripts %}
    {{ encore_entry_script_tags('navigationMenu') }}

    {{ encore_entry_script_tags('popover') }}
{% endblock %}