{% comment %}
  Regression case assertions card — expandable rows with Tool Calls / Assertions tabs.
  Variables: cases (required) from case_results_to_display()
  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 details.</p>
  </c-card-header>
  <c-card-content>
    {% if cases %}
    <div class="rc-case-list" x-data="{ expanded: [], tabs: {} }">
      {% for c in cases %}
      {% with idx=forloop.counter0 %}
      <div class="rc-case" :class="expanded.includes({{ idx }}) && 'rc-case--expanded'">
        <!-- Collapsed row -->
        <div class="rc-case__header"
             @click="expanded = expanded.includes({{ idx }}) ? expanded.filter(i => i !== {{ idx }}) : [...expanded, {{ idx }}]; if (!tabs[{{ idx }}]) tabs[{{ idx }}] = 'tools'">
          <span class="rc-status-badge {{ c.status_class }}">{{ c.status }}</span>
          <div class="rc-case__info">
            <div class="rc-case__title-row">
              <span class="rc-case__id">{{ c.identifier }}</span>
              <span class="rc-category-pill {{ c.category_class }}">{{ c.category }}</span>
            </div>
            <p class="rc-case__desc">{{ c.description }}</p>
          </div>
          <div class="rc-case__score-area">
            <span class="rc-score {% if c.assertions_passed_count == c.assertions_total_count %}rc-score--pass{% else %}rc-score--fail{% endif %}">{{ c.assertions_passed_count }}/{{ c.assertions_total_count }}</span>
            <span class="rc-chevron" :class="expanded.includes({{ idx }}) && 'rc-chevron--open'">▼</span>
          </div>
        </div>

        <!-- Expanded panel -->
        <div x-show="expanded.includes({{ idx }})" x-cloak x-transition class="rc-case__panel">
          <!-- Tab bar -->
          <div class="rc-tab-bar">
            <button class="rc-tab" :class="tabs[{{ idx }}] === 'tools' && 'rc-tab--active'"
                    @click.stop="tabs[{{ idx }}] = 'tools'">
              Tool Calls <span class="rc-tab__badge">{{ c.actual_tool_calls|length }}</span>
            </button>
            <button class="rc-tab" :class="tabs[{{ idx }}] === 'assertions' && 'rc-tab--active'"
                    @click.stop="tabs[{{ idx }}] = 'assertions'">
              Assertions <span class="rc-tab__badge">{{ c.assertions_total_count }}</span>
            </button>
          </div>

          <!-- Tool Calls tab -->
          <div x-show="tabs[{{ idx }}] === 'tools'" class="rc-tab-content">
            {% if c.actual_subagents_used or c.actual_tool_calls %}
            <div class="rc-assertion">
              <div class="rc-assertion__body rc-tool-calls-body">
                {% if c.actual_subagents_used %}
                <div class="rc-tool-calls-section">
                  <span class="rc-assertion__title">Subagents</span>
                  <div class="rc-pills-wrap" style="margin-top: 0.375rem;">
                    {% for sa in c.actual_subagents_used %}
                    <span class="rc-pill rc-pill--green">{{ sa }}</span>
                    {% endfor %}
                  </div>
                </div>
                {% endif %}
                {% if c.actual_tool_calls %}
                <div class="rc-tool-calls-section">
                  <span class="rc-assertion__title">Tool Calls</span>
                {% for tc in c.actual_tool_calls %}
                <div style="margin-top: 0.5rem;">
                  <div class="rc-assertion__title-row">
                    <span class="rc-tool-entry__num">{{ forloop.counter }})</span>
                    <span class="rc-pill rc-pill--blue">{{ tc.tool_name }}</span>
                  </div>
                  {% if tc.args_entries %}
                  <table class="rc-param-table">
                    <thead>
                      <tr>
                        <th>Parameter</th>
                        <th>Value</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for entry in tc.args_entries %}
                      <tr>
                        <td class="rc-param-table__param">{{ entry.param }}</td>
                        <td>{{ entry.value }}</td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                  {% endif %}
                </div>
                {% endfor %}
                </div>
                {% endif %}
              </div>
            </div>
            {% else %}
            <p class="text-sm text-muted-foreground italic">No tool calls recorded.</p>
            {% endif %}
          </div>

          <!-- Assertions tab -->
          <div x-show="tabs[{{ idx }}] === 'assertions'" class="rc-tab-content">
            {% if c.assertions %}
            <div class="rc-assertion">
              <div class="rc-assertion__body rc-tool-calls-body">
                {% for a in c.non_tool_assertions %}
                <div class="rc-tool-calls-section">
                  <div class="rc-assertion__title-row">
                    <span class="rc-assertion__icon {% if a.passed %}rc-assertion__icon--pass{% else %}rc-assertion__icon--fail{% endif %}">{% if a.passed %}✓{% else %}✗{% endif %}</span>
                    <span class="rc-assertion__title">{{ a.title }}</span>
                  </div>
                  {% include "eval/components/_assertion_values.html" with a=a %}
                </div>
                {% endfor %}
                {% if c.tool_param_assertions %}
                <div class="rc-tool-calls-section">
                  <span class="rc-assertion__title">Tool Param Assertions</span>
                  <p class="rc-section-desc">Verifies expected parameters were passed. Extra parameters in the actual call are allowed.</p>
                  {% for a in c.tool_param_assertions %}
                  <div style="margin-top: 0.5rem;">
                    <div class="rc-assertion__title-row">
                      <span class="rc-assertion__icon {% if a.passed %}rc-assertion__icon--pass{% else %}rc-assertion__icon--fail{% endif %}">{% if a.passed %}✓{% else %}✗{% endif %}</span>
                      <span class="rc-tool-entry__num">{{ forloop.counter }})</span>
                      <span class="rc-pill rc-pill--blue">{{ a.tool_name }}</span>
                    </div>
                    {% include "eval/components/_assertion_values.html" with a=a %}
                  </div>
                  {% endfor %}
                </div>
                {% endif %}
              </div>
            </div>
            {% else %}
            <p class="text-sm text-muted-foreground italic">No assertions</p>
            {% endif %}
          </div>
        </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>