{% if error_message %}
    <div class="tree-error">{{ error_message }}</div>
{% endif %}
{% if tree_truncated %}
    <div class="tree-error" role="status">
        Safety limit reached after examining {{ directory_entry_limit }} directory entries. Some folders may be omitted.
    </div>
{% endif %}

<ul class="tree-list" data-depth="{{ depth }}">
    {% for node in nodes %}
        <li
            class="tree-item {% if node.path == active_path %}is-active{% endif %}"
            style="--tree-depth: {{ depth }}"
            data-tree-item
            data-tree-path="{{ node.path }}"
        >
            <button
                class="tree-toggle"
                type="button"
                data-tree-toggle
                {% if node.has_children %}
                    hx-get="/ui/files/tree?path={{ node.path_param }}&depth={{ depth + 1 }}&active={{ active_path_param }}"
                    hx-target="#tree-children-{{ node.id }}"
                    hx-swap="innerHTML"
                    aria-label="Toggle {{ node.name }}"
                    aria-expanded="false"
                    aria-controls="tree-children-{{ node.id }}"
                {% else %}
                    disabled
                    aria-label="{{ node.name }} has no subfolders"
                {% endif %}
            >
                <span aria-hidden="true">{% if node.has_children %}+{% else %}.{% endif %}</span>
            </button>
            <button
                class="tree-link"
                type="button"
                hx-get="/ui/files/list?path={{ node.path_param }}"
                hx-target="#file-results"
                hx-swap="innerHTML"
                data-tree-link
                data-tree-path="{{ node.path_param }}"
            >
                {{ node.name }}
            </button>
            <div id="tree-children-{{ node.id }}" class="tree-children"></div>
        </li>
    {% endfor %}
</ul>