{% macro item(taxon, isChild) %}
  {% import _self as macros %}

  {% if (taxon.children|length) > 0 %}
    <li class="nav-item dropdown" {{ sylius_test_html_attribute('menu-item') }}>
      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">{{ taxon.name }}</a>
      <ul class="dropdown-menu">
        {% for child_taxon in taxon.children %}
          {{ macros.dropdownItem(child_taxon) }}
        {% endfor %}
      </ul>
    </li>
  {% else %}
    <li class="nav-item">
      <a href="{{ path('sylius_shop_product_index', { slug: taxon.slug, '_locale': taxon.translation.locale }) }}" class="nav-link" {{ sylius_test_html_attribute('menu-item') }}>{{ taxon.name }}</a>
    </li>
  {% endif %}
{% endmacro %}

{% macro dropdownItem(taxon) %}
  <li>
    <a class="dropdown-item" href="{{ path('sylius_shop_product_index', { slug: taxon.slug, '_locale': taxon.translation.locale }) }}">{{ taxon.name }}</a>
  </li>
{% endmacro %}

{% import _self as macros %}

<nav class="navbar navbar-expand-lg bg-body mt-2">
  <div class="col">
    <a href="{{ path('sylius_shop_homepage') }}">
      <div class="row ms-5">
        <!-- Logo à gauche -->
        <div class="col-auto p-0">
          <img class="d-none d-md-block" style="height: 5.5rem" src="{{ asset('build/app/shop/images/logo-no-text.png', 'app.shop') }}" alt="logo" />

          <img class="d-md-none" style="height: 3.8rem" src="{{ asset('build/app/shop/images/logo-no-text.png', 'app.shop') }}" alt="logo" />
        </div>
        <!-- Textes à droite, empilés verticalement -->
        <div class="col-auto p-0 ms-2">
          <div class="d-flex flex-column text-center"></div>
        </div>
      </div>
    </a>
  </div>

  <div class="offcanvas offcanvas-start" tabindex="-1" id="mainNavbarOffcanvas" aria-labelledby="mainNavbarOffcanvasLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="mainNavbarOffcanvasLabel">Menu</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      {% if (taxons|length) > 0 %}
        <div class="navbar-nav gap-3" {{ sylius_test_html_attribute('menu') }}>
          {% for taxon in taxons %}
            {% if canUserAccessTaxon(taxon) %}
              {{ macros.item(taxon) }}
            {% endif %}
          {% endfor %}
          <li class="nav-item">
            <a href="https://chateau-reaut.com" class="nav-link" target="_blank" rel="noopener noreferrer">Le château</a>
          </li>
        </div>
      {% endif %}
    </div>
  </div>

  <div class="col-auto d-flex align-items-center">
    <div class="me-2 me-md-5">{{ render(url('sylius_shop_partial_cart_summary', { template: '@SyliusShop/Cart/_widget.html.twig' })) }}</div>
  </div>
  <!-- Offcanvas Menu -->
  <button class="navbar-toggler btn btn-sm p-2 ms-auto me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNavbarOffcanvas" aria-controls="mainNavbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M2.5 12.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11z" />
    </svg>
  </button>
</nav>