{% set content = getContent() %}
<div class="button">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="cache"></div>
<div class="overMenu"></div>
<div id="header" class="fixed-top header-scrolled">
  <div class="menu-responsive d-xl-none d-lg-none d-block">
    <i class="bi bi-list"></i>
  </div>
  <div class="container2 row d-flex align-items-center justify-content-between">
    <div class="logo col-xl-3 col-lg-3 col-md-6 col-6"><a class="nameNav" href="{{ path('app_index') }}"><img class="logo" data-src="{{ asset(elemGraph ~ getContent()['header']['logo']) }}" alt="logo"></a></div>
    <div class="d-flex flex-column justify-content-between col-xl-9 col-lg-9 col-md-6 col-6">
      <!-- <div class="d-flex align-items-center justify-content-xl-between justify-content-lg-between justify-content-end pb-xl-4 pb-lg-4 pb-0">
        <div>

        </div>
        <div class="reseaux-sociaux d-flex align-items-center ms-4">
            <a href="{{ getCoord().facebook }}" target="_blank"><img class="icon-top" data-src="{{ asset(elemGraph ~content['main']['facebook']) }}" alt="facebook"></a>
            <a href="{{ getCoord().instagram }}" target="_blank"><img class="icon-top" data-src="{{ asset(elemGraph ~ content['main']['instagram']) }}" alt="instagram"></a>
            <a href="{{ getCoord().linkedin }}" target="_blank"><img class="icon-top" data-src="{{ asset(elemGraph ~ content['main']['linkedin']) }}" alt="linkedin"></a>
        </div>
        <div class="d-flex align-items-center">
          <div class="adresseH d-xl-block d-lg-block d-none">
            <div class="adresse d-flex align-items-center"><img class="me-2" data-src="{{ asset(elemGraph ~ content['header']['loc']) }}" alt="adresse">{{ getCoord().adresse }} {{ getCoord().cp }} {{ getCoord().ville }}</div>
          </div>
          <div class="telH ms-4 d-xl-block d-lg-block d-none">
            <a href="tel:{{ getCoord().tel1 }}" class="d-flex align-items-center"><img class="me-2" data-src="{{ asset(elemGraph ~ content['header']['telban']) }}" alt="telephone">{{ getCoord().tel1 }}</a>
          </div>
        </div>
      </div> -->
      <nav id="navbar" class="nav-links">
      {% macro menu_categories(trees) %}
      {% import _self as macros %}
      {% for category in trees %}
      <li>
        {% if category.url %}
        <a  href="{{ path(category.url) }}">{{ category.translations[app.request.locale].name }}</a>
        {% else %}
          {% if category.__children is not empty %}
          <a class="dropDown">{{ category.translations[app.request.locale].name }}</a>
          {% else %}
          <a  href="{{ path('article', {'slug':category.translations[app.request.locale].slug, 'id':category.id}) }}">{{ category.translations[app.request.locale].name }}</a>
          {% endif %}
        {% endif %}
        {% if category.__children is not empty %}
        <ul class="sub-menu">
          {{ macros.menu_categories(category.__children) }}
        </ul>
        {% endif %}
      </li>
      {% endfor %}
      {% endmacro %}
      
      <ul>
        {{ _self.menu_categories(trees) }}
        {% if metaP().paiement %}
        <li class="cart_dropdown"><a class="nav-link cart_trigger" href="#" data-toggle="dropdown"><i class="bi bi-cart4"></i><span class="cart_count">
            {% if app.session.get('cart') is defined and app.session.get('cartData') is not null %}
                {{ app.session.get('cartData').data.quantity_cart }}
            {% else %}
                0
            {% endif %}
            </span></a>
            <div class="cart_box">
                <ul class="cart_list">
                    {% if app.session.get('cartData') is not null %}
                        {% if app.session.get('cartData').products is defined %}
                            {% for element in app.session.get('cartData').products %}
                                        <li>
                                            <a href="{{ path('cartDeleteAll', {'id':element.product.id})}}" class="item_remove"><i class="ion-close"></i></a>
                                            <a href="#"><img data-src="{{ asset(produitImg ~ element.product.imageProduits[0].name) }}" alt="{{ element.product.name}}">{{ element.product.name}}</a>
                                            <span class="cart_quantity">{{ element.quantity }}<span class="cart_amount"> x <span class="price_symbole">€</span></span>{{ element.product.prix }}</span>
                                        </li>
                            {% endfor %}
                        {% endif %}
                    {% else %}
                        <li>Votre panier est vide !</li>
                    {% endif %}
                </ul>
                {% if app.session.get('cartData') %}
                    <div class="cart_footer">
                        <p class="cart_total"><strong>Soustotal HT:</strong> <span class="cart_price"> <span class="price_symbole">€</span></span>{{ app.session.get('cartData').data.subTotalTTC }}</p>
                        <p class="cart_buttons"><a href="{{ path('app_panier')}}" class="bouton">Retour panier</a><a href="{{ path('app_checkout')}}" class="bouton checkout">Valider</a></p>
                    </div>
                {% endif %}                           
            </div>
        </li>
        {% if app.user %}
        <li class="">
          <a href="{{ path('app_client_detail') }}">Profile</a>
        </li>
        {% else %}
        <li class="">
          <a href="{{ path('app_connexion') }}">Connexion</a>
        </li>
        {% endif %}
        {% endif %}
      </ul>
      {% if getModule()['Lang']['active'] == true and getLang()|length > 1 %}
      <li class="lang">
        
        {% for locale in getLang() %}
          {% if locale != app.request.locale %}
          <div class="inLang">
            <a href="{{ path(getCurrentRoute().get('_route'), getCurrentRoute().get('_route_params')|merge({('_locale'): locale})) }}">{{ locale }}</a>
          </div>
          {% endif %}
        {% endfor %}
        </li>
    {% endif %}
  </nav>
    </div>
</div>
</div>