{# Tree / hierarchy display — UX-035 adopter #8. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
  {% macro render_node(node, depth=0) %}
  <details class="bg-[hsl(var(--muted)/0.3)] rounded-[4px] mb-1 group" {% if depth == 0 %}open{% endif %}>
    <summary class="text-[13px] py-1.5 px-3 flex items-center gap-2 cursor-pointer list-none hover:bg-[hsl(var(--muted)/0.5)] rounded-[4px] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
             {% if action_url %}hx-get="{{ action_url | replace('{id}', node[action_id_field|default('id')]|string) }}"
             hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
      <svg class="h-3 w-3 text-[hsl(var(--muted-foreground))] transition-transform group-open:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
      </svg>
      <span class="font-medium text-[hsl(var(--foreground))] truncate">{{ node.get(display_key, node.get('name', node.get('title', ''))) }}</span>
      {% if node._children %}
      <span class="ml-auto inline-flex items-center px-1.5 h-4 rounded-[3px] text-[10px] text-[hsl(var(--muted-foreground))] bg-[hsl(var(--muted))]">{{ node._children|length }}</span>
      {% endif %}
    </summary>
    {% if node._children %}
    <div class="px-2 pb-1 pl-5">
      {% for child in node._children %}
        {{ render_node(child, depth + 1) }}
      {% endfor %}
    </div>
    {% endif %}
  </details>
  {% endmacro %}

  {% if tree_items %}
    {% for node in tree_items %}
      {{ render_node(node) }}
    {% endfor %}
  {% elif items %}
    {# Fallback: flat list if no tree structure detected #}
    {% for item in items %}
    <div class="py-1.5 px-2 text-[13px] text-[hsl(var(--foreground))] border-b border-[hsl(var(--border))] last:border-0">
      {{ item.get(display_key, item.get('name', item.get('title', ''))) }}
    </div>
    {% endfor %}
  {% else %}
    {% include "fragments/empty_state.html" %}
  {% endif %}
{% endcall %}