{% load i18n documents_tags %}
<ul class="nav flex-column">
    {% for node in nodes %}
        {% with folder=node.folder %}
            <li class="nav-item">
                <div class="d-flex align-items-center">
                    {% if node.children %}
                        {% with collapse_id="folder-tree-"|add:folder.slug %}
                            <button class="folder-tree-toggle" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#{{ collapse_id }}"
                                    aria-expanded="{% if folder.slug in trail_slugs or active_slug == folder.slug %}true{% else %}false{% endif %}"
                                    aria-controls="{{ collapse_id }}"
                                    aria-label="{% translate 'Toggle subfolders' %}">
                                <i class="bi bi-chevron-right"></i>
                            </button>
                        {% endwith %}
                    {% else %}
                        <span class="folder-tree-toggle opacity-0" aria-hidden="true">
                            <i class="bi bi-chevron-right"></i>
                        </span>
                    {% endif %}
                    <a href="{% url 'documents:list' %}?folder={{ folder.slug }}"
                       class="nav-link flex-grow-1 d-flex align-items-center p-2 {% if active_slug == folder.slug %}active{% endif %} {% if folder.slug in trail_slugs and active_slug != folder.slug %} fw-semibold{% endif %}" >
                        <i class="bi bi-folder{% if active_slug == folder.slug %}-fill{% endif %}"></i>
                        <span class="ms-2 text d-none d-md-inline">{{ folder.name }}</span>
                    </a>
                </div>
                {% if node.children %}
                    {% with collapse_id="folder-tree-"|add:folder.slug %}
                        <div class="collapse {% if folder.slug in trail_slugs or active_slug == folder.slug %}show{% endif %} ms-3 border-start ps-2"
                             id="{{ collapse_id }}">
                            {% render_folder_tree node.children active_slug trail_slugs %}
                        </div>
                    {% endwith %}
                {% endif %}
            </li>
        {% endwith %}
    {% empty %}
        <li class="nav-item text-muted small px-2">{% translate "No folders available." %}</li>
    {% endfor %}
</ul>