{% comment %}
  Alpine.js assertion card — client-side equivalent of _latest_regression_run.html.
  Uses the same rc-* CSS classes for visual parity.

  Expects an Alpine parent scope with a `cell` object containing:
    assertion_results, actual_tool_calls, actual_subagents_used

  Usage:
    <div x-data="assertionCard(cell.assertion_results, cell.actual_tool_calls, cell.actual_subagents_used)">
      {% include "eval/components/_assertion_card_alpine.html" %}
    </div>
{% endcomment %}

<template x-if="hasContent">
  <div class="rc-case rc-case--inline" :class="expanded && 'rc-case--expanded'">

    <div class="rc-case__header" @click="expanded = !expanded">
      <div class="rc-case__score-area">
        <span class="rc-score" :class="allPassed ? 'rc-score--pass' : 'rc-score--fail'"
              x-text="passedCount + '/' + totalCount"></span>
        <span class="rc-chevron" :class="expanded && 'rc-chevron--open'">▼</span>
      </div>
    </div>

    <div x-show="expanded" x-cloak x-transition class="rc-case__panel">

      <div class="rc-tab-bar">
        <button class="rc-tab" :class="activeTab === 'tools' && 'rc-tab--active'"
                @click.stop="activeTab = 'tools'" type="button">
          Tool Calls <span class="rc-tab__badge" x-text="toolCalls.length"></span>
        </button>
        <button class="rc-tab" :class="activeTab === 'assertions' && 'rc-tab--active'"
                @click.stop="activeTab = 'assertions'" type="button">
          Assertions <span class="rc-tab__badge" x-text="totalCount"></span>
        </button>
      </div>

      <!-- Tool Calls tab -->
      <div x-show="activeTab === 'tools'" class="rc-tab-content">
        <template x-if="subagents.length > 0 || toolCalls.length > 0">
          <div class="rc-assertion">
            <div class="rc-assertion__body rc-tool-calls-body">

              <template x-if="subagents.length > 0">
                <div class="rc-tool-calls-section">
                  <span class="rc-assertion__title">Subagents</span>
                  <div class="rc-pills-wrap" style="margin-top: 0.375rem;">
                    <template x-for="sa in subagents" :key="sa">
                      <span class="rc-pill rc-pill--green" x-text="sa"></span>
                    </template>
                  </div>
                </div>
              </template>

              <template x-if="toolCalls.length > 0">
                <div class="rc-tool-calls-section">
                  <span class="rc-assertion__title">Tool Calls</span>
                  <template x-for="(tc, tcIdx) in toolCalls" :key="'tc-' + tcIdx">
                    <div style="margin-top: 0.5rem;">
                      <div class="rc-assertion__title-row">
                        <span class="rc-tool-entry__num" x-text="(tcIdx + 1) + ')'"></span>
                        <span class="rc-pill rc-pill--blue" x-text="tc.tool_name"></span>
                      </div>
                      <template x-if="tc.args_entries.length > 0">
                        <table class="rc-param-table">
                          <thead><tr><th>Parameter</th><th>Value</th></tr></thead>
                          <tbody>
                            <template x-for="entry in tc.args_entries" :key="entry.param">
                              <tr>
                                <td class="rc-param-table__param" x-text="entry.param"></td>
                                <td x-text="entry.value"></td>
                              </tr>
                            </template>
                          </tbody>
                        </table>
                      </template>
                    </div>
                  </template>
                </div>
              </template>

            </div>
          </div>
        </template>
        <template x-if="subagents.length === 0 && toolCalls.length === 0">
          <p class="text-sm text-muted-foreground italic">No tool calls recorded.</p>
        </template>
      </div>

      <!-- Assertions tab -->
      <div x-show="activeTab === 'assertions'" class="rc-tab-content">
        <template x-if="assertions.length > 0">
          <div class="rc-assertion">
            <div class="rc-assertion__body rc-tool-calls-body">

              <!-- Non-tool assertions -->
              <template x-for="(a, aIdx) in nonToolAssertions" :key="'nta-' + aIdx">
                <div class="rc-tool-calls-section">
                  <div class="rc-assertion__title-row">
                    <span class="rc-assertion__icon"
                          :class="a.passed ? 'rc-assertion__icon--pass' : 'rc-assertion__icon--fail'"
                          x-text="a.passed ? '✓' : '✗'"></span>
                    <span class="rc-assertion__title" x-text="a.title"></span>
                  </div>
                  <div class="rc-assertion__values">
                    <div class="rc-assertion__val-col">
                      <span class="rc-assertion__val-label">Expected</span>
                      <template x-if="a.expected_items.length > 0">
                        <div class="rc-pills-wrap">
                          <template x-for="item in a.expected_items" :key="'ei-' + item">
                            <span class="rc-pill rc-pill--neutral" x-text="item"></span>
                          </template>
                        </div>
                      </template>
                      <template x-if="a.expected_entries.length > 0">
                        <table class="rc-param-table">
                          <thead><tr><th>Parameter</th><th>Value</th></tr></thead>
                          <tbody>
                            <template x-for="entry in a.expected_entries" :key="'ee-' + entry.param">
                              <tr>
                                <td class="rc-param-table__param" x-text="entry.param"></td>
                                <td x-text="entry.value"></td>
                              </tr>
                            </template>
                          </tbody>
                        </table>
                      </template>
                      <template x-if="a.expected_items.length === 0 && a.expected_entries.length === 0">
                        <span class="rc-plain-value" x-text="a.expected"></span>
                      </template>
                    </div>
                    <div class="rc-assertion__val-col">
                      <span class="rc-assertion__val-label">Actual</span>
                      <template x-if="a.actual_items.length > 0">
                        <div class="rc-pills-wrap">
                          <template x-for="item in a.actual_items" :key="'ai-' + item">
                            <span class="rc-pill rc-pill--neutral" x-text="item"></span>
                          </template>
                        </div>
                      </template>
                      <template x-if="a.actual_entries.length > 0">
                        <table class="rc-param-table">
                          <thead><tr><th>Parameter</th><th>Value</th></tr></thead>
                          <tbody>
                            <template x-for="entry in a.actual_entries" :key="'ae-' + entry.param">
                              <tr>
                                <td class="rc-param-table__param" x-text="entry.param"></td>
                                <td x-text="entry.value"></td>
                              </tr>
                            </template>
                          </tbody>
                        </table>
                      </template>
                      <template x-if="a.actual_items.length === 0 && a.actual_entries.length === 0">
                        <span class="rc-plain-value" :class="!a.passed && 'rc-plain-value--fail'" x-text="a.actual"></span>
                      </template>
                    </div>
                  </div>
                </div>
              </template>

              <!-- Tool param assertions -->
              <template x-if="toolParamAssertions.length > 0">
                <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>
                  <template x-for="(a, aIdx) in toolParamAssertions" :key="'tpa-' + aIdx">
                    <div style="margin-top: 0.5rem;">
                      <div class="rc-assertion__title-row">
                        <span class="rc-assertion__icon"
                              :class="a.passed ? 'rc-assertion__icon--pass' : 'rc-assertion__icon--fail'"
                              x-text="a.passed ? '✓' : '✗'"></span>
                        <span class="rc-tool-entry__num" x-text="(aIdx + 1) + ')'"></span>
                        <span class="rc-pill rc-pill--blue" x-text="a.tool_name"></span>
                      </div>
                      <div class="rc-assertion__values">
                        <div class="rc-assertion__val-col">
                          <span class="rc-assertion__val-label">Expected</span>
                          <template x-if="a.expected_items.length > 0">
                            <div class="rc-pills-wrap">
                              <template x-for="item in a.expected_items" :key="'tei-' + item">
                                <span class="rc-pill rc-pill--neutral" x-text="item"></span>
                              </template>
                            </div>
                          </template>
                          <template x-if="a.expected_entries.length > 0">
                            <table class="rc-param-table">
                              <thead><tr><th>Parameter</th><th>Value</th></tr></thead>
                              <tbody>
                                <template x-for="entry in a.expected_entries" :key="'tee-' + entry.param">
                                  <tr>
                                    <td class="rc-param-table__param" x-text="entry.param"></td>
                                    <td x-text="entry.value"></td>
                                  </tr>
                                </template>
                              </tbody>
                            </table>
                          </template>
                          <template x-if="a.expected_items.length === 0 && a.expected_entries.length === 0">
                            <span class="rc-plain-value" x-text="a.expected"></span>
                          </template>
                        </div>
                        <div class="rc-assertion__val-col">
                          <span class="rc-assertion__val-label">Actual</span>
                          <template x-if="a.actual_items.length > 0">
                            <div class="rc-pills-wrap">
                              <template x-for="item in a.actual_items" :key="'tai-' + item">
                                <span class="rc-pill rc-pill--neutral" x-text="item"></span>
                              </template>
                            </div>
                          </template>
                          <template x-if="a.actual_entries.length > 0">
                            <table class="rc-param-table">
                              <thead><tr><th>Parameter</th><th>Value</th></tr></thead>
                              <tbody>
                                <template x-for="entry in a.actual_entries" :key="'tae-' + entry.param">
                                  <tr>
                                    <td class="rc-param-table__param" x-text="entry.param"></td>
                                    <td x-text="entry.value"></td>
                                  </tr>
                                </template>
                              </tbody>
                            </table>
                          </template>
                          <template x-if="a.actual_items.length === 0 && a.actual_entries.length === 0">
                            <span class="rc-plain-value" :class="!a.passed && 'rc-plain-value--fail'" x-text="a.actual"></span>
                          </template>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </template>

            </div>
          </div>
        </template>
        <template x-if="assertions.length === 0">
          <p class="text-sm text-muted-foreground italic">No assertions</p>
        </template>
      </div>

    </div>
  </div>
</template>