{% load docs_tags %}
{% for item in items %}
{% if item.is_dir %}
<div>
  {% if item.url %}
  <a href="{{ item.url }}"
     class="d-flex align-items-center justify-content-between w-100 px-3 bg-transparent border-0 text-start text-secondary text-decoration-none
                      {% if doc_path == item.url|removeprefix:'/docs/'|removesuffix:'/' %}
                      fw-semibold border-start border-primary border-2 fw-semibold
                      {% elif is_first_level %}py-1 text-dark{% else %}py-1 small{% endif %}">
    <span>{{ item.label }}</span>
  </a>
  {% else %}
  <span class="d-flex align-items-center w-100 px-3 text-secondary
               {% if is_first_level %}py-1 text-dark{% else %}py-1 small{% endif %}">
    {{ item.label }}
  </span>
  {% endif %}
  <div class="ps-3">
    {% include "docs_viewer/_nav_tree.html" with items=item.children current_path=doc_path is_first_level=False %}
  </div>
</div>
{% else %}
<a href="{{ item.url }}"
   class="d-block px-3 text-decoration-none small text-secondary
               {% if is_first_level %}py-1 {% else %}py-1{% endif %}
               {% if doc_path == item.url|removeprefix:'/docs/'|removesuffix:'/' %}
               fw-semibold border-start border-primary border-2
               {% else %}
               {% if not is_first_level %}text-secondary{% endif %}
               {% endif %}">
  {{ item.label }}
</a>
{% endif %}
{% endfor %}