{% from '_icons.html' import fd_icon %}
{% macro render_workspace_tree(pages, depth=0) %}
  {% for page in pages %}
  {% set safe_name = page.name | replace("'", "\\'") %}
  <li class="sidebar-item ws-tree-item" 
      data-id="{{ page.db_id }}" 
      data-is-folder="{{ 'true' if page.is_folder else 'false' }}"
      data-depth="{{ depth }}"
      data-name="{{ safe_name }}"
      :class="{ active: activeNodeId === {{ page.db_id }} }"
      draggable="true"
      @dragstart="dragStart($event, {{ page.db_id }})"
      @dragover.prevent="dragOver($event, {{ page.db_id }}, {{ 'true' if page.is_folder else 'false' }})"
      @dragleave="dragLeave($event)"
      @drop.prevent="drop($event, {{ page.db_id }})"
      style="padding-left:{{ 4 + depth * 12 }}px;"
      @contextmenu.prevent="showWsContext($event, {{ page.db_id }}, '{{ safe_name }}', {{ 'true' if page.is_folder else 'false' }})"
      @touchstart="wsTouchStart($event)"
      @touchend="wsTouchEnd($event, {{ page.db_id }}, '{{ safe_name }}', {{ 'true' if page.is_folder else 'false' }})"
      @touchmove="wsTouchMove($event)">
    {% if page.is_folder %}
    <button class="tree-chevron" 
            @click.stop="toggleTreeFolder({{ page.db_id }})"
            :class="{ open: expandedFolders[{{ page.db_id }}] }"
            title="Toggle folder">▶</button>
    {% else %}
    <span style="width:12px;flex-shrink:0;"></span>
    {% endif %}
    <span class="page-icon">{% set valid_icons = ["folder","file","star","link","trash","book","home","settings","lock","globe","image","edit","calendar","users","user","search","tag","bar-chart","grid","list","align-left","zap"] %}{% if page.icon in valid_icons %}{{ fd_icon(page.icon,14) }}{% elif page.is_folder %}{{ fd_icon("folder",14) }}{% else %}{{ fd_icon("file",14) }}{% endif %}</span>
    {% if page.is_folder %}
    <span class="page-name tree-folder-link" 
          @click.stop="navigateToFolder({{ page.db_id }})" 
          draggable="false"
          title="Open folder">{{ page.name }}{% if page.child_count %} <span class="child-count">({{ page.child_count }})</span>{% endif %}</span>
    {% else %}
    <a href="/pages/{{ page.db_id }}" class="page-name" draggable="false">{{ page.name }}</a>
    {% endif %}
  </li>
    {% if page.children %}
    <li x-show="expandedFolders[{{ page.db_id }}]" x-transition style="list-style:none;margin:0;padding:0;">
      <ul style="list-style:none;margin:0;padding:0;">
        {{ render_workspace_tree(page.children, depth + 1) }}
      </ul>
    </li>
    {% endif %}
  {% endfor %}
{% endmacro %}