{% if categories != blank %}
  <div class="container">
    <nav id="menu" class="navbar navbar-expand-lg bg-primary">
      <div id="category" class="d-block d-sm-block d-lg-none">{{ text_category }}</div>
      <button type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" class="navbar-toggler d-lg-none"><i class="fa-solid fa-bars"></i></button>
      <div id="navbar-menu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">

          {{ categories }}

          {% for category in categories %}

            {{ category }}

            {% if category.children %}

              {% assign total = category.children | length %}

              {{ total }}


              {% if total > 20 %}

                {% assign batch = total | divided_by: 4 | round %}
                {% assign column = 4 %}

              {% else %}

                {% assign batch = 5 %}
                {% assign column = total | divided_by: 5 | round %}

              {% endif %}

              <li class="nav-item dropdown"><a href="{{ category.href }}" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">{{ category.name }}</a>
                <div class="dropdown-menu dropdown-column-{{ column }}">
                  <div class="dropdown-inner">

                    {% for children in category.children|slice(batch) %}

                      <ul class="list-unstyled">
                        {% for child in children %}
                          <li><a href="{{ child.href }}" class="dropdown-item">{{ child.name }}</a></li>
                        {% endfor %}
                      </ul>

                    {% endfor %}

                  </div>
                  <ul class="list-unstyled">
                    <li>
                      <hr class="dropdown-divider">
                    </li>

                    <li><a href="{{ category.href }}" class="dropdown-item">{{ text_all }} {{ category.name }}</a></li>

                  </ul>
                </div>
              </li>
            {% else %}

              <li class="nav-item"><a href="{{ category.href }}" class="dropdown-item">{{ category.name }}</a></li>

            {% endif %}

          {% endfor %}


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