{% macro render_node(node) %}
<div class="tree-item plan-node">
  <div class="tree-row">
    {% if node.children %}<span class="tree-icon" onclick="event.stopPropagation(); togglePlanChildren(this)">▼</span>{% else %}<span style="width:10px;flex-shrink:0"></span>{% endif %}
    <span class="plan-op-dot plan-op-{{ node.category }}"></span>
    <span class="tree-label" onclick="togglePlanDetail(this)">{{ node.label }}</span>
    {% if node.id %}<span class="plan-node-id">#{{ node.id }}</span>{% endif %}
  </div>
  {% if node.detail %}
  <pre class="plan-detail hidden">{{ node.detail }}</pre>
  {% endif %}
  {% if node.children %}
  <div class="tree-children">
    {% for child in node.children %}
    {{ render_node(child) }}
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endmacro %}

<div class="plan-tree-wrap">
  <div class="plan-actions">
    <button class="btn-secondary" onclick="explainPlanWithAI(this)">Explain Plan with AI</button>
  </div>
  {% if roots %}
  <div class="plan-tree">
    {% for root in roots %}
    {{ render_node(root) }}
    {% endfor %}
  </div>
  <p class="dim pad" style="font-size:11px">Click a node to see its detail; click the row's caret to collapse/expand.</p>
  {% else %}
  <p class="dim pad">Couldn't parse the plan structure — showing raw text below.</p>
  {% endif %}
  <details class="plan-raw-details">
    <summary class="git-section-label" style="cursor:pointer;list-style:none">Raw EXPLAIN FORMATTED output</summary>
    <pre class="diff-pre" style="padding:8px 14px">{{ raw }}</pre>
  </details>
</div>