{% set maxTabs = 6 %}
{% set maxCols = 6 %}
{% set maxTaxons = 6 %}

{% set activeTaxons = taxons|filter(t => t.enabled) %}
{% set firstCategories = activeTaxons|slice(0, maxTabs) %}

{# ▼▼ Version Desktop ▼▼ #}
<div class="dropdown position-static pb-lg-2 d-none d-lg-block">
  <button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0" data-bs-toggle="dropdown"
    data-bs-auto-close="outside" aria-expanded="false">
    <i class="ci-menu fs-lg me-2"></i>
    <span class="animate-target">Catégories</span>
  </button>

  <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
    <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
      {% for cat in firstCategories %}
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link text-uppercase {% if loop.first %}active{% endif %}"
          id="tab-{{ cat.slug }}" data-bs-toggle="tab" data-bs-target="#tab-pane-{{ cat.slug }}" role="tab"
          aria-controls="tab-pane-{{ cat.slug }}" aria-selected="{{ loop.first ? 'true' : 'false' }}">
          {{ cat.name }}
        </button>
      </li>
      {% endfor %}
    </ul>

    <div class="tab-content pb-xl-4">
      {% for cat in firstCategories %}
      <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="tab-pane-{{ cat.slug }}" role="tabpanel"
        aria-labelledby="tab-{{ cat.slug }}">
        <div class="row g-4">
          {% set children = cat.children|filter(c => c.enabled) %}
          {% if children|length > 0 %}
          {% for childTaxon in children %}
          <div class="col-lg-2">
            <p class="mb-2">{{ childTaxon.name }}</p>
            <ul class="nav flex-column gap-2 mt-0">
              {% set grandChildren = childTaxon.children|filter(gc => gc.enabled)|slice(0, maxTaxons) %}
              {% for grandChild in grandChildren %}
              <li class="d-flex w-100 pt-1">
                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ path('sylius_shop_product_index', {
                                'slug': grandChild.slug,
                                '_locale': app.request.locale
                              }) }}">
                  {{ grandChild.name }}
                </a>
              </li>
              {% endfor %}
              <li class="d-flex w-100 pt-1">
                <a class="nav-link animate-underline animate-target d-inline fw-bold text-truncate p-0" href="{{ path('sylius_shop_product_index', {
                              'slug': childTaxon.slug,
                              '_locale': app.request.locale
                            }) }}">
                  Voir tout
                </a>
              </li>
            </ul>
          </div>
          {% endfor %}
          {% else %}
          <p class="text-muted">Aucune sous-catégorie trouvée.</p>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<div class="d-lg-none">
  <button class="btn nav-link fw-semibold text-uppercase ps-0" type="button" data-bs-toggle="offcanvas"
    data-bs-target="#offcanvasCategories" aria-controls="offcanvasCategories">
    <i class="ci-menu fs-lg me-2"></i>
  </button>

  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasCategories" aria-labelledby="offcanvasLabel">
    <div class="offcanvas-header">
      <p class="offcanvas-title" id="offcanvasLabel">Catégories</p>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body">
      <div class="accordion" id="mobileCategoriesAccordion">
        {% for cat in firstCategories %}
        <div class="accordion-item border-0">
          <p class="accordion-header" id="heading-{{ cat.slug }}">
            <button class="accordion-button collapsed text-uppercase fw-semibold px-0" type="button"
              data-bs-toggle="collapse" data-bs-target="#collapse-{{ cat.slug }}" aria-expanded="false"
              aria-controls="collapse-{{ cat.slug }}">
              {{ cat.name }}
            </button>
          </p>
          <div id="collapse-{{ cat.slug }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ cat.slug }}"
            data-bs-parent="#mobileCategoriesAccordion">
            <div class="accordion-body px-0 pt-2 pb-0">
              {% set children = cat.children|filter(c => c.enabled) %}
              {% for childTaxon in children %}
              <p class="mb-1 fw-semibold">{{ childTaxon.name }}</p>
              <ul class="nav flex-column mb-2 ps-3">
                {% set grandChildren = childTaxon.children|filter(gc => gc.enabled)|slice(0, maxTaxons) %}
                {% for grandChild in grandChildren %}
                <li>
                  <a class="nav-link p-0 text-truncate" href="{{ path('sylius_shop_product_index', {
                      'slug': grandChild.slug,
                      '_locale': app.request.locale
                    }) }}">{{ grandChild.name }}</a>
                </li>
                {% endfor %}
                <li>
                  <a class="nav-link fw-bold p-0" href="{{ path('sylius_shop_product_index', {
                      'slug': childTaxon.slug,
                      '_locale': app.request.locale
                    }) }}">Voir tout</a>
                </li>
              </ul>
              {% endfor %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

      <ul class="nav flex-column mb-4">
        <li class="nav-item">
          <a class="nav-link pe-3" href="{{ path('about', {'_locale': app.request.locale}) }}">À&nbsp;propos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link pe-3" href="{{ path('article_index', {'_locale': app.request.locale}) }}">Blog</a>
        </li>
      </ul>
    </div>
  </div>
</div>