{% comment %}
  Overview tab: summary stat cards + config comparison radar chart.
  Radar uses existing axes: Pass Rate, Latency, Cost, Tokens, Threshold Pass, Judge Score.
  Requires Alpine parent scope with: getOverviewStats(), formatCost(), selectedConfigs.
{% endcomment %}

<template x-if="enableLlmJudge && getJudgeSummary().length > 0">
  <div class="exp-judge-breakdown">
    <div class="exp-judge-breakdown__title">Judge Breakdown</div>
    <div class="exp-judge-breakdown__items">
      <template x-for="cs in getJudgeSummary()" :key="cs.criterion_key">
        <div class="exp-judge-breakdown__item">
          <div class="exp-judge-breakdown__label" x-text="cs.criterion_key.replace(/_/g, ' ')"></div>
          <div class="exp-judge-breakdown__score" x-text="cs.avg_score.toFixed(2)"></div>
          <div class="exp-judge-breakdown__bar-track">
            <div class="exp-judge-breakdown__bar-fill"
                 :style="'width:' + (cs.avg_score / 5 * 100) + '%; background:' + (cs.avg_score >= 4.5 ? 'var(--eval-score-5, #22c55e)' : cs.avg_score >= 3.5 ? 'var(--eval-score-4, #84cc16)' : cs.avg_score >= 2.5 ? 'var(--eval-score-3, #eab308)' : cs.avg_score >= 1.5 ? 'var(--eval-score-2, #f97316)' : 'var(--eval-score-1, #ef4444)')"></div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<div class="exp-radar-container">
  <div class="exp-radar-title">Config Comparison</div>
  <div class="exp-radar-subtitle">Normalized metrics across selected configs</div>
  <div class="relative" style="max-height: 380px;">
    <canvas id="runDetailRadar" class="w-full"></canvas>
  </div>
  <div id="runDetailRadar-legend" class="mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground"></div>
  <div x-show="_radarExcluded.length > 0" class="exp-radar-excluded-note">
    <span>⚠️</span>
    <span>
      Not included in radar, these configs had scoring errors:
      <strong x-text="_radarExcluded.join(', ')"></strong>
    </span>
  </div>
</div>