{% comment %}Recursive navigation tree node.
Expects: node (NavNode), depth (int), active_path (str) from parent context.{% endcomment %}
{% load dj_design_system_gallery %}

{% if node.node_type.value == "app" %}
    {# ── App root node ───────────────────────────────────────────── #}
    <div class="gallery-nav__group">
        <a class="gallery-nav__group-label" href="{{ node.url }}">{{ node.label }}</a>
        {% for child in node.children %}
            {% include "dj_design_system/gallery/navtree.html" with node=child depth=1 %}
        {% endfor %}
    </div>
{% elif node.has_children %}
    {# ── Folder / expandable node ── #}
    <details class="gallery-nav__folder"
             {% if active_path and node.active_path in active_path %}open{% endif %}>
        <summary class="gallery-nav__link gallery-nav__link--folder"
                 style="padding-left: {{ depth|add_indent }}px">
            <a href="{{ node.url }}"
               class="gallery-nav__folder-link{% if active_path == node.active_path %} gallery-nav__link--active{% endif %}">
                {% if node.is_component %}
                    <span class="gallery-nav__icon gallery-nav__icon--component"
                          aria-hidden="true"></span>
                {% else %}
                    <span class="gallery-nav__icon gallery-nav__icon--folder"
                          aria-hidden="true"></span>
                {% endif %}
                {{ node.label }}
            </a>
        </summary>
        {% for child in node.children %}
            {% include "dj_design_system/gallery/navtree.html" with node=child depth=depth|add:"1" %}
        {% endfor %}
    </details>
{% else %}
    {# ── Leaf node (component or document) ───────────────────────── #}
    <a class="gallery-nav__link{% if active_path == node.active_path %} gallery-nav__link--active{% endif %}"
       href="{{ node.url }}"
       style="padding-left: {{ depth|add_indent }}px">
        {% if node.is_component %}
            <span class="gallery-nav__icon gallery-nav__icon--component"
                  aria-hidden="true"></span>
        {% elif node.is_document %}
            <span class="gallery-nav__icon gallery-nav__icon--doc" aria-hidden="true"></span>
        {% endif %}
        {{ node.label }}
    </a>
{% endif %}