{% for d in dirs %}
<div class="tree-item">
  <div class="tree-row" onclick="toggleFileNode(this)" data-path="{{ d | string }}">
    <span class="tree-icon">▶</span>
    <span class="tree-icon-type ti-folder"></span>
    <span class="tree-label">{{ d.name }}</span>
  </div>
  <div class="tree-children hidden"></div>
</div>
{% endfor %}

{% for f in files %}
{% set editable = f.suffix in ('.sql', '.yml', '.yaml', '.json') %}
<div class="tree-item">
  <div class="tree-row tree-leaf {% if not editable %}file-readonly{% endif %}"
       data-path="{{ f | string }}" data-is-file="1"
       {% if editable %}onclick="openLocalFile('{{ f | string | replace("'", "\\'") }}', '{{ f.suffix }}')"{% endif %}
       title="{{ f }}">
    <span style="width:10px;flex-shrink:0"></span>
    <span class="tree-icon-type {% if f.suffix == '.sql' %}ti-sql-file{% elif f.suffix == '.json' %}ti-json-file{% elif f.suffix in ('.yml', '.yaml') %}ti-yaml-file{% else %}ti-other-file{% endif %}"></span>
    <span class="tree-label">{{ f.name }}</span>
    {% if editable %}
    <button class="git-action-btn git-discard-btn file-delete-btn"
            onclick="event.stopPropagation(); deleteLocalFile('{{ f | string | replace("'", "\\'") }}', this)"
            title="Delete">✕</button>
    {% endif %}
  </div>
</div>
{% endfor %}

{% if not dirs and not files %}
<p class="dim pad">Empty.</p>
{% endif %}