{% comment %}
  Tools Called card - shows actual tool calls and subagents per case with expandable details.
  Variables: cases (required) - list of case display dicts with actual_tool_calls / actual_subagents_used
{% endcomment %}
<c-card class="mb-6">
  <c-card-header class="shrink-0 flex flex-row items-center justify-between">
    <c-card-title>Tools Called</c-card-title>
    <p class="text-xs text-muted-foreground">Click a row to expand tool call details.</p>
  </c-card-header>
  <c-card-content>
    {% if cases %}
    <div class="space-y-0 divide-y divide-border" x-data="{ expanded: [] }">
      {% for c in cases %}
      {% with idx=forloop.counter0 %}
      <div class="py-3">
        <div class="flex flex-row items-center gap-3 cursor-pointer group hover:bg-muted/20 rounded px-1 -mx-1 transition-colors"
             @click="expanded = expanded.includes({{ idx }}) ? expanded.filter(i => i !== {{ idx }}) : [...expanded, {{ idx }}]"
             :class="expanded.includes({{ idx }}) && 'bg-muted/30'">
          <span class="font-mono text-sm text-muted-foreground shrink-0">{{ c.identifier }}</span>
          <span class="text-sm text-foreground truncate flex-1 min-w-0">{{ c.description }}</span>
          <span class="inline-flex gap-1 px-2 py-0.5 rounded-md text-xs font-medium border shrink-0 {{ c.category_class }}">{{ c.category }}</span>
          <span class="text-muted-foreground shrink-0 transition-transform duration-200" :class="expanded.includes({{ idx }}) && 'rotate-180'">▼</span>
        </div>
        <div x-show="expanded.includes({{ idx }})" x-cloak x-transition
             class="mt-3 pl-4 ml-2 space-y-3 border-l-2 border-border">
          {% if c.actual_subagents_used %}
          <div class="flex items-start gap-2 text-sm">
            <div class="min-w-0 flex-1">
              <p class="font-semibold text-foreground">Subagents</p>
              {% for sa in c.actual_subagents_used %}
              <p class="text-xs mt-0.5"><code class="text-foreground">{{ sa }}</code></p>
              {% endfor %}
            </div>
          </div>
          {% endif %}
          {% if c.actual_tool_calls %}
            {% for tc in c.actual_tool_calls %}
            <div class="flex items-start gap-2 text-sm">
              <div class="min-w-0 flex-1">
                <p class="font-medium text-foreground">{{ tc.tool_name }}</p>
                {% if tc.args %}
                <p class="text-xs mt-0.5"><span class="text-muted-foreground">params:</span> <code class="text-foreground break-all">{{ tc.args }}</code></p>
                {% endif %}
              </div>
            </div>
            {% endfor %}
          {% endif %}
          {% if not c.actual_tool_calls and not c.actual_subagents_used %}
          <p class="text-sm text-muted-foreground italic">No tool calls recorded.</p>
          {% endif %}
        </div>
      </div>
      {% endwith %}
      {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-muted-foreground italic py-4">No case data available.</p>
    {% endif %}
  </c-card-content>
</c-card>