{% for child in children %}
<li>
{% if child.has_children %}
    <span class="node-row">
        <button class="expand-btn" onclick="toggleChildren(this, '{{ child.path }}')" aria-label="Expand" aria-expanded="false">+</button>
        <a class="tree-link{% if selected_path is defined and selected_path == child.path %} is-active{% endif %}"
           data-path="{{ child.path }}"
           href="{{ child.browse_url }}"
           hx-get="/htmx/entity-content?path={{ child.path }}"
           hx-target="#content-panel"
           hx-push-url="{{ child.browse_url }}">{{ child.name.replace('_', ' ') | title }}</a>
    </span>
    <ul class="children hidden" data-path="{{ child.path }}"></ul>
{% elif child.is_entity %}
    <span class="node-row">
        <span class="expand-btn placeholder">&nbsp;</span>
        <a class="tree-link entity-leaf{% if selected_path is defined and selected_path == child.path %} is-active{% endif %}"
           data-path="{{ child.path }}"
           href="{{ child.browse_url }}"
           hx-get="/htmx/entity-content?path={{ child.path }}"
           hx-target="#content-panel"
           hx-push-url="{{ child.browse_url }}">{{ child.name.replace('_', ' ') | title }}</a>
    </span>
{% else %}
    <span class="node-row">
        <span class="expand-btn placeholder">&nbsp;</span>
        <a class="tree-link{% if selected_path is defined and selected_path == child.path %} is-active{% endif %}"
           data-path="{{ child.path }}"
           href="{{ child.browse_url }}"
           hx-get="/htmx/entity-content?path={{ child.path }}"
           hx-target="#content-panel"
           hx-push-url="{{ child.browse_url }}">{{ child.name.replace('_', ' ') | title }}</a>
    </span>
{% endif %}
</li>
{% endfor %}