{% comment %}
  Latest Regression Run Assertions - case list with expandable assertion details.
  Variables: cases (required) from case_results_to_display(run['regression_case_results'])
  Optional: title (default "Latest Regression Run Assertions")
{% endcomment %}
<c-card class="mb-6">
  <c-card-header class="shrink-0 flex flex-row items-center justify-between">
    <c-card-title>{{ title|default:"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 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="inline-flex gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold border shrink-0 {{ c.status_class }}">{% if c.passed %}✓{% else %}✗{% endif %} {{ c.status }}</span>
          {% if c.baseline_transition %}<span class="inline-flex px-2 py-0.5 rounded-md text-xs font-semibold border shrink-0 {{ c.baseline_transition_class }}">{{ c.baseline_transition_label }}</span>{% endif %}
          <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">
          {% for a in c.assertions %}
            {% if a.tool_name %}
              {% ifchanged a.title %}
              <div class="flex items-center gap-2 text-sm">
                <span class="{% if a.tool_group_passed %}text-eval-metric-good{% else %}text-eval-metric-bad{% endif %} shrink-0 font-bold">{% if a.tool_group_passed %}✓{% else %}✗{% endif %}</span>
                <p class="font-semibold text-foreground">{{ a.title }}</p>
              </div>
              {% endifchanged %}
              <div class="ml-6 mt-1 flex items-start gap-2 text-sm">
                <span class="{% if a.passed %}text-eval-metric-good{% else %}text-eval-metric-bad{% endif %} shrink-0 font-bold">{% if a.passed %}✓{% else %}✗{% endif %}</span>
                <div class="min-w-0 flex-1">
                  <p class="font-medium text-foreground">{{ a.tool_name }}</p>
                  <p class="text-xs mt-0.5"><span class="text-muted-foreground">expected:</span> <code class="text-foreground break-all">{{ a.expected }}</code></p>
                  <p class="text-xs mt-0.5"><span class="text-muted-foreground">actual:</span> <code class="text-foreground break-all">{{ a.actual }}</code></p>
                </div>
              </div>
            {% else %}
              <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 font-bold">{% if a.passed %}✓{% else %}✗{% endif %}</span>
                <div class="min-w-0 flex-1">
                  <p class="font-semibold text-foreground">{{ a.title }}</p>
                  <p class="text-xs mt-0.5"><span class="text-muted-foreground">expected:</span> <code class="text-foreground break-all">{{ a.expected }}</code></p>
                  <p class="text-xs mt-0.5"><span class="text-muted-foreground">actual:</span> <code class="text-foreground break-all">{{ a.actual }}</code></p>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endwith %}
      {% 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>