{% set logged = is_granted('IS_AUTHENTICATED_REMEMBERED') %}
{% set path = path('app_user_my_account') %}

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid px-lg-5">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        {% if logged %}
            <div class="btn-group order-last">
                <i class="bi bi-person-circle fs-4 text-white cursor-pointer"
                   data-bs-toggle="dropdown"
                   data-bs-display="static"
                   aria-expanded="false"></i>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <p class="dropdown-item disabled fs-7 m-0 ">
                            {{ 'templates.components.layout.navbar.logged'|trans({
                                '%name%': app.user.displayName
                            }) }}
                        </p>
                    </li>
                    <li>
                        <a href="{{ path }}"
                           class="dropdown-item">
                            {{ 'templates.pages.account.index.my_account'|trans }}
                        </a>
                    </li>
                    {% if app.user.isAdmin() %}
                        <li>
                            <a
                                href="{{ path('admin') }}"
                                class="dropdown-item">
                                {{ 'templates.components.layout.navbar.admin_link'|trans }}
                            </a>
                        </li>
                    {% endif %}

                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a href="{{ path('app_logout') }}"
                           class="dropdown-item">
                            {{ 'templates.components.layout.navbar.disconnect'|trans }}
                        </a>
                    </li>
                </ul>
            </div>
        {% else %}
            <a href="{{ path }}" class="order-last fs-4 text-white">
                <i class="bi bi-person-circle"></i>
            </a>
        {% endif %}

        <a class="navbar-brand lh-0" href="/">
            {% if menu.logo is null %}
                <img src="{{ asset('svg/logo.svg') }}" height="24" alt="logo">
            {% else %}
                <img src="{{ menu|public_url }}" height="24" alt="logo"/>
            {% endif %}
        </a>

        <div class="col justify-content-lg-between collapse navbar-collapse"
             id="navbarSupportedContent">
            <div class="order-lg-last">
                {% include 'components/layout/_searchbar.html.twig' with {
                    placeholder: 'Rechercher un objet ou un service...',
                    margin: 'my-3 my-lg-0 me-lg-3',
                    action: path('app_product_list'),
                    q: q,

                } %}
            </div>

            <div class="d-lg-flex">
                <ul class="navbar-nav align-items-center">
                    {% for item in items %}
                        {% if item.children is defined and item.children is not empty %}
                            <li class="nav-item dropdown">
                                <a href="#" class="nav-link text-white dropdown-toggle" role="button"
                                   data-bs-toggle="dropdown" aria-expanded="false">
                                    {{ item.name }}
                                </a>

                                <ul class="dropdown-menu">
                                    {% for child in item.children %}
                                        <li>
                                            <a class="dropdown-item" href="{{ child.link }}">
                                                {{ child.name }}
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% elseif item.getLinkType().value == 'link' %}
                            <li class="nav-item">
                                <a href="{{ item.link }}" class="nav-link text-white">
                                    {{ item.name }}
                                </a>
                            </li>
                        {% else %}
                            <li class="nav-item">
                                <a href="{{ item.link }}" class="nav-link fs-5 text-white">
                                    {% if item.mediaType.isWeb() %}
                                        <i class="bi bi-globe"></i>
                                    {% else %}
                                        <i class="bi bi-{{ item.mediaType.value }}"></i>
                                    {% endif %}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    {% if contactEnabled %}
                        <li class="nav-item">
                            <a href="mailto:{{ contactEmail }}" class="nav-link text-white">
                                {{ 'templates.components.layout.navbar.contact'|trans }}
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
</nav>