{% macro item(taxon, dropdown = null, depth, i = 0) %}
	{% import _self as macros %}

	{% if taxon.enabledChildren|length > 0 %}
		{% set depth = depth + 1 %}

		{% if depth is same as(1) %}
			<li class="dropdown" {{ sylius_test_html_attribute('menu-item') }}>
				<a class="dropdown-toggle nav-link" href="#" data-bs-toggle="dropdown">
					{{ taxon.name }}
				</a>
				<div class="dropdown-menu dropdown{{ i != 1 ? '-reverse' :'' }}">
					<ul>
						{% for childTaxon in taxon.enabledChildren %}
							{{ macros.item(childTaxon, "dropdown", depth) }}
						{% endfor %}
						<li>
							<a class="dropdown-item nav-link nav_item" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}">Voir tout</a>
						</li>
					</ul>
				</div>
			</li>
		{% else %}
			<li>
				<a class="dropdown-item menu-link dropdown-toggler" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}" {{ sylius_test_html_attribute('menu-item') }}>{{ taxon.name }}</a>
				<div class="dropdown-menu">
					<ul>
						{% for childTaxon in taxon.enabledChildren %}
							{{ macros.item(childTaxon, "dropdown", depth) }}
							<li>
							{% endfor %}
							<a class="dropdown-item nav-link nav_item" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}">Voir tout</a>
						</ul>
					</div>
				</li>
			{% endif %}
		{% else %}
			{% if depth is same as(0) %}
				<li>
					<a class="nav-link nav_item" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}" {{ sylius_test_html_attribute('menu-item') }}>{{ taxon.name }}</a>
				</li>
			{% else %}
				<li>
					<a class="dropdown-item nav-link nav_item" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}" {{ sylius_test_html_attribute('menu-item') }}>{{ taxon.name }}</a>
				</li>
			{% endif %}
		{% endif %}
	{% endmacro %}

	{% import _self as macros %}

	{% if taxons|length > 0 %}
		{# MOBILE NAVBAR #}
		<div class="bottom_header dark_skin main_menu_uppercase d-block d-sm-block d-md-block d-lg-none d-xl-none">
			<div class="py-5vh">
				<nav class="navbar navbar-expand-lg">
					<a class="navbar-brand" href="{{ path('sylius_shop_homepage') }}">
						<img class="logo_light" src="{{ asset('assets/shop/img/v3.png') }}" alt="Cuir O folies logo" class="logo_light"/>
						<img class="logo_dark m-0" style="width:3rem" src="{{ asset('assets/shop/img/v4.png') }}" alt="Cuir O folies logo" class="logo_dark"/>
					</a>

					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-expanded="false">
						<span class="ion-android-menu"></span>
					</button>
					<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
						<ul class="navbar-nav">
							{% set depth = 0 %}
							{% for taxon in taxons %}
								{{ macros.item(taxon, null, depth) }}
								{% set depth = 0 %}
							{% endfor %}
							<li class="dropdown" {{ sylius_test_html_attribute('menu-item') }}>
								<a class="dropdown-toggle nav-link" href="#" data-bs-toggle="dropdown">
									À propos de nous
								</a>
								<div class="dropdown-menu dropdown-reverse">
									<ul>
										<li><a class="dropdown-item nav-link nav_item" href="#">Histoire de la marque</a></li>
										<li><a class="dropdown-item nav-link nav_item"href="{{ path('sylius_shop_contact_request') }}">{{ 'sylius.ui.contact_us'|trans }}</a></li>


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

						</ul>
					</div>
					<ul class="navbar-nav attr-nav align-items-center">
						{{ render(controller('sylius.controller.shop.security_widget:renderAction')) }}
						<li>
							<a href="javascript:void(0);" class="nav-link search_trigger">
								<i class="linearicons-magnifier"></i>
							</a>
							<div class="search_wrap">
								<span class="close-search">
									<i class="ion-ios-close-empty"></i>
								</span>
								<form method="get" action="/fr_FR/taxons/produits">
									<input type="text" placeholder="Search" class="form-control" id="search_input" name="criteria%5Bsearch%5D%5Bvalue%5D">
									<button type="submit" class="search_icon">
										<i class="ion-ios-search-strong"></i>
									</button>
								</form>
							</div>
							<div class="search_overlay"></div>
						</li>
						{{ render(url('sylius_shop_partial_cart_summary', {'template': '@SyliusShop/Cart/_widget.html.twig'})) }}
					</ul>
				</nav>
			</div>
		</div>

		{# DESKTOP NAVBAR #}
		<div class="bottom_header dark_skin main_menu_uppercase d-none d-sm-none d-md-none d-lg-block d-xl-block">
			<div class="py-5vh">
				<nav class="navbar navbar-expand-lg justify-content-between justify-content-between">
					<a class="navbar-brand d-flex justify-content-center" href="{{ path('sylius_shop_homepage') }}" style="width:10vw">


						<img class="logo_light" src="{{ asset('assets/shop/img/v3.png') }}" alt="Cuir O folies logo" class="logo_light"/>
						<img class="logo_dark m-0" src="{{ asset('assets/shop/img/v4.png') }}" alt="Cuir O folies logo" class="logo_dark"/>
					</a>
					<a href="{{ path('sylius_shop_homepage') }}">
						<h1 style="margin-top:2rem" class='h1'>Cuir'ô'Folies</h1>
					</a>
					<ul class="navbar-nav attr-nav align-items-between justify-content-between" style="width:10vw">

						{{ render(controller('sylius.controller.shop.security_widget:renderAction')) }}
						<li>
							<a href="javascript:void(0);" class="nav-link search_trigger">
								<i class="linearicons-magnifier"></i>
							</a>
							<div class="search_wrap">
								<span class="close-search">
									<i class="ion-ios-close-empty"></i>
								</span>
								<form method="get" action="/fr_FR/taxons/produits">
									<input type="text" placeholder="Search" class="form-control" id="search_input" name="criteria%5Bsearch%5D%5Bvalue%5D">
									<button type="submit" class="search_icon">
										<i class="ion-ios-search-strong"></i>
									</button>
								</form>
							</div>
							<div class="search_overlay"></div>
						</li>
						{{ render(url('sylius_shop_partial_cart_summary', {'template': '@SyliusShop/Cart/_widget.html.twig'})) }}
					</ul>
				</nav>
			</div>
		</div>
		<div class="bottom_header dark_skin main_menu_uppercase d-none d-sm-none d-md-none d-lg-block d-xl-block">
			<div class="py-5vh">
				<nav class="navbar navbar-expand-lg">
					<div class="collapse navbar-collapse w-100" style="display:block!important;" id="navbarSupportedContent">
						<ul class="navbar-nav justify-content-around">
							{% set depth = 0 %}
							{% for taxon in taxons %}
								{% set i = 1 %}
								{{ macros.item(taxon, null, depth, i) }}
								{% set depth = 0 %}
								{% set i = i + 1 %}
							{% endfor %}
							<li class="dropdown" {{ sylius_test_html_attribute('menu-item') }}>
								<a class="dropdown-toggle nav-link" href="#" data-bs-toggle="dropdown">
									À propos de nous
								</a>
								<div class="dropdown-menu dropdown-reverse">
									<ul>
										<li><a class="dropdown-item nav-link nav_item" href="#">Histoire de la marque</a></li>
										<li><a class="dropdown-item nav-link nav_item"href="{{ path('sylius_shop_contact_request') }}">{{ 'sylius.ui.contact_us'|trans }}</a></li>


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