{% comment %}
  Latest Regression Run Assertions - assertion list with expandable rows.
  Variables:
    assertions (required): List of {passed, status, status_class, function_name, description, category, category_class, details}
    details has subagents_used, subagents_not_used, tool_params_match with {expected, actual}
{% endcomment %}
<c-card class="mb-6">
  <c-card-header class="shrink-0 flex flex-row items-center justify-between">
    <c-card-title>Latest Regression Run Assertions</c-card-title>
    <p class="text-xs text-muted-foreground">Click a row to expand assertion details.</p>
  </c-card-header>
  <c-card-content>
    {% if assertions %}
    <div class="space-y-0 divide-y divide-border" x-data="{ expanded: null }">
      {% for a in assertions %}
      <div class="py-3 first:pt-0 {% if not forloop.first %}pt-3{% endif %}">
        <div class="flex flex-row items-center gap-3 cursor-pointer group"
             @click="expanded = expanded === {{ forloop.counter0 }} ? null : {{ forloop.counter0 }}"
             :class="expanded === {{ forloop.counter0 }} ? 'bg-muted/30' : ''">
          <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium border shrink-0 {{ a.status_class }}">
            {% if a.passed %}✓{% else %}✗{% endif %} {{ a.status }}
          </span>
          <span class="font-mono text-sm text-foreground shrink-0">{{ a.function_name }}</span>
          <span class="text-sm text-muted-foreground truncate flex-1 min-w-0">{{ a.description }}</span>
          <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium border shrink-0 {{ a.category_class }}">{{ a.category }}</span>
          <span class="text-muted-foreground shrink-0 transition-transform" :class="expanded === {{ forloop.counter0 }} ? 'rotate-180' : ''">▼</span>
        </div>
        <div x-show="expanded === {{ forloop.counter0 }}"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-1"
             x-transition:enter-end="opacity-100 translate-y-0"
             class="mt-3 pl-2 border-l-2 border-border ml-2 space-y-3">
          <div class="flex items-start gap-2 text-sm">
            <span class="text-eval-metric-good shrink-0">✓</span>
            <div>
              <p class="font-medium text-muted-foreground">Subagents Used</p>
              <p class="text-xs mt-0.5"><span class="text-muted-foreground">expected:</span> <code class="text-foreground">{{ a.details.subagents_used.expected }}</code></p>
              <p class="text-xs mt-0.5"><span class="text-muted-foreground">actual:</span> <code class="text-foreground">{{ a.details.subagents_used.actual }}</code></p>
            </div>
          </div>
          <div class="flex items-start gap-2 text-sm">
            <span class="text-eval-metric-good shrink-0">✓</span>
            <div>
              <p class="font-medium text-muted-foreground">Subagents Not Used</p>
              <p class="text-xs mt-0.5"><span class="text-muted-foreground">expected:</span> <code class="text-foreground">{{ a.details.subagents_not_used.expected }}</code></p>
              <p class="text-xs mt-0.5"><span class="text-muted-foreground">actual:</span> <code class="text-foreground">{{ a.details.subagents_not_used.actual }}</code></p>
            </div>
          </div>
          <div class="flex items-start gap-2 text-sm">
            <span class="{% if a.passed %}text-eval-metric-good{% else %}text-eval-metric-bad{% endif %} shrink-0">{% if a.passed %}✓{% else %}✗{% endif %}</span>
            <div>
              <p class="font-medium text-muted-foreground">Tool Param Assertions</p>
              <p class="text-xs mt-0.5"><span class="text-muted-foreground">expected:</span> <code class="text-foreground">{{ a.details.tool_params_match.expected }}</code></p>
              <p class="text-xs mt-0.5"><span class="text-muted-foreground">actual:</span> <code class="text-foreground">{{ a.details.tool_params_match.actual }}</code></p>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-muted-foreground italic py-4">No regression run data available.</p>
    {% endif %}
  </c-card-content>
</c-card>