{% load helpers %}

<ul class="navbar-nav">
    {% for menu in nav_items %}
        <li class="nav-item">
            <a class="nav-link" href="#menu{{ menu.label }}" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="menu{{ menu.label }}">
               <i class="{{ menu.icon_class }}"></i>
               <span class="nav-link-text">{{ menu.label }}</span>
             </a>
            <div class="collapse" id="menu{{ menu.label }}">
                <ul class="nav nav-sm flex-column">

                    {% for group in menu.groups %}
                        {# Within each main menu, there are groups of menu items #}
                            <li class="nav-item">
                                {# Group Label #}
                                <div class="nav-group-header">
                                    <span class="nav-group-label">{{ group.label }}</span>
                                </div>
                            </li>

                        {% for item in group.items %}
                            {# Each Item #}
                            {% if request.user|has_perms:item.permissions %}
                            <li class="nav-item{% if not item.buttons %} no-buttons{% endif %}">
                                <a href="{% url item.link %}" class="nav-link">
                                    {{ item.link_text }}
                                </a>

                                {# Menu item buttons (if any) #}
                                {% if item.buttons %}
                                    <div class="btn-group px-2">
                                        {% for button in item.buttons %}
                                            {% if request.user|has_perms:button.permissions %}
                                                    <a class="btn btn-sm btn-{{ button.color }} lh-1" href="{% url button.link %}" title="{{ button.title }}">
                                                        <i class="{{ button.icon_class }}"></i>
                                                    </a>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </li>
                            {% else %}
                                {# Display a disabled link (no permission) #}
                                <li class="nav-item disabled">
                                    <a href="#" class="nav-link disabled" aria-disabled="true" disabled>
                                        <i class='mdi mdi-lock small'></i>
                                        {{ item.link_text }}
                                    </a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div>
        </li>
    {% endfor %}
</ul>
