{% comment %}
  Latest Experiment Run — config breakdown with pass rate, cost, latency.
  Expects Alpine scope with `latestRun` object shaped like _build_latest_run_summary().
{% endcomment %}
<c-card class="flex flex-col" x-show="latestRun" x-cloak>
  <c-card-header class="shrink-0">
    <c-card-title>Latest Experiment Run</c-card-title>
    <p class="text-xs text-muted-foreground mt-0.5" x-text="latestRun ? latestRun.run_name : ''"></p>
  </c-card-header>
  <c-card-content>
    <table class="w-full caption-bottom text-sm">
      <thead class="[&_tr]:border-b bg-muted/50">
        <tr class="border-b">
          <th class="h-9 px-2 text-left align-middle font-medium text-muted-foreground" style="width: 25%;">Config</th>
          <th class="h-9 px-2 text-left align-middle font-medium text-muted-foreground" style="width: 15%;">Status</th>
          <th class="h-9 px-2 text-left align-middle font-medium text-muted-foreground" style="width: 15%;">Pass Rate</th>
          <th class="h-9 px-2 text-left align-middle font-medium text-muted-foreground" style="width: 20%;">Model(s)</th>
          <th class="h-9 px-2 text-left align-middle font-medium text-muted-foreground" style="width: 12%;">Avg Cost</th>
          <th class="h-9 px-2 text-left align-middle font-medium text-muted-foreground" style="width: 13%;">Total Cost</th>
        </tr>
      </thead>
      <tbody class="[&_tr:last-child]:border-0">
        <template x-for="cfg in (latestRun ? latestRun.configs : [])" :key="cfg.name">
          <tr class="border-b transition-colors hover:bg-muted/30">
            <td class="px-2 py-2 align-middle">
              <span class="font-medium" x-text="cfg.name"></span>
              <span x-show="cfg.is_baseline" class="text-[10px] text-muted-foreground ml-1">(baseline)</span>
            </td>
            <td class="px-2 py-2 align-middle">
              <span class="inline-flex px-2 py-0.5 rounded-md text-xs font-medium border"
                    :class="cfg.status === 'complete' ? 'bg-eval-metric-good/10 text-eval-metric-good border-eval-metric-good/20' :
                            cfg.status === 'failed' ? 'bg-eval-metric-bad/10 text-eval-metric-bad border-eval-metric-bad/20' :
                            cfg.status === 'running' ? 'bg-blue-500/10 text-blue-500 border-blue-500/20' :
                            'bg-muted text-muted-foreground border-border'"
                    x-text="cfg.status || '—'"></span>
            </td>
            <td class="px-2 py-2 align-middle tabular-nums">
              <span :class="cfg.pass_rate != null && cfg.pass_rate >= 80 ? 'text-eval-metric-good font-semibold' :
                           cfg.pass_rate != null && cfg.pass_rate >= 50 ? 'text-eval-metric-warning font-semibold' :
                           cfg.pass_rate != null ? 'text-eval-metric-bad font-semibold' : 'text-muted-foreground'"
                    x-text="cfg.pass_rate != null ? cfg.pass_rate + '%' : '—'"></span>
            </td>
            <td class="px-2 py-2 align-middle">
              <template x-if="cfg.models && cfg.models.length">
                <div class="flex flex-col gap-0.5">
                  <template x-for="model in cfg.models" :key="model">
                    <span class="text-xs leading-tight" x-text="model"></span>
                  </template>
                  <span x-show="cfg.models_inherited" x-cloak class="text-[10px] text-muted-foreground">(inherited)</span>
                </div>
              </template>
              <template x-if="!cfg.models || !cfg.models.length">
                <span class="text-xs text-muted-foreground">—</span>
              </template>
            </td>
            <td class="px-2 py-2 align-middle tabular-nums" x-text="cfg.avg_cost_per_case != null ? '$' + cfg.avg_cost_per_case.toFixed(4) : '—'"></td>
            <td class="px-2 py-2 align-middle tabular-nums" x-text="cfg.total_cost != null ? '$' + cfg.total_cost.toFixed(4) : '—'"></td>
          </tr>
        </template>
      </tbody>
    </table>
    <div x-show="!latestRun || !latestRun.configs || !latestRun.configs.length" x-cloak>
      <p class="text-sm text-muted-foreground italic py-4">No experiment run data available.</p>
    </div>
  </c-card-content>
</c-card>