{% load helpers %}

<ul class="navbar-nav">
  {% for menu, groups in nav_items %}
    <li class="nav-item">
      {# Menu heading #}
      <a class="nav-link" href="#menu{{ menu.name }}" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="menu{{ menu.name }}">
       <i class="{{ menu.icon_class }}"></i>
       <span class="nav-link-text">{{ menu.label }}</span>
      </a>
      {# Menu groups #}
      <div class="collapse" id="menu{{ menu.name }}">
        <ul class="nav nav-sm flex-column">
          {% for group, items in groups %}
            {# Group heading #}
            <li class="nav-item">
              <div class="nav-group-header">
                <span class="nav-group-label">{{ group.label }}</span>
              </div>
            </li>
            {# Group items #}
            {% for item, buttons in items %}
              <li class="nav-item{% if not item.buttons %} no-buttons{% endif %}">
                {# Item #}
                <a href="{% url item.link %}" class="nav-link">{{ item.link_text }}</a>
                {# Item buttons (if any) #}
                {% if buttons %}
                  <div class="btn-group px-2">
                    {% for button in buttons %}
                      <a class="btn btn-sm btn-{{ button.color }} lh-1" href="{% url button.link %}" title="{{ button.title }}">
                        <i class="{{ button.icon_class }}"></i>
                      </a>
                    {% endfor %}
                  </div>
                {% endif %}
              </li>
            {% endfor %}
          {% endfor %}
        </ul>
      </div>
    </li>
  {% endfor %}
</ul>
