{% for item in items %}
  {% if item.type == "title" %}
    <li class="side-nav-title mt-1">{{ item.label }}</li>

  {% elif item.children %}
    <li class="side-nav-item">
      <a class="side-nav-link" data-bs-toggle="collapse" href="#menu-{{ item.label|slugify }}-{{ level }}" aria-expanded="false" aria-controls="menu-{{ item.label|slugify }}-{{ level }}">
        <i class="{{ item.icon|default:'ri-folder-4-fill' }}"></i>
        <span>{{ item.label }}</span>
        <span class="menu-arrow"></span>
      </a>
      <div class="collapse" id="menu-{{ item.label|slugify }}-{{ level }}">
        <ul class="{% if level == 1 %}side-nav-second-level{% elif level == 2 %}side-nav-third-level{% else %}side-nav-forth-level{% endif %}">
          {% for child in item.children %}
            {% if child.children %}
              {% include "pxy_dashboard/partials/sidebar_menu_node.html" with items=child.children level=level|add:"1" %}
            {% else %}
              <li>
                <a href="{% url child.url %}">
                  <i class="{{ child.icon|default:'ri-arrow-right-s-line' }}"></i>
                  <span>{{ child.label }}</span>
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </li>

  {% else %}
    <li class="side-nav-item">
      <a href="{% url item.url %}" class="side-nav-link" {% if item.open_in_new_tab %}target="_blank"{% endif %}>
        <i class="{{ item.icon|default:'ri-circle-line' }}"></i>
        {% if item.badge %}
          <span class="badge bg-success float-end">{{ item.badge }}</span>
        {% endif %}
        <span>{{ item.label }}</span>
      </a>
    </li>
  {% endif %}
{% endfor %}
