{% load eval_tags %}
{% comment %}
  Config comparison card — one per ExperimentConfigRun in the run detail page.
  Variables:
    cr (required): ExperimentConfigRun instance (with experiment_config select_related)
    scoring_enabled (required): bool — True when gold set has assertions
    enable_llm_judge (required): bool
{% endcomment %}
<div class="config-comparison-card rounded-lg border border-border bg-card px-5 py-4 cursor-pointer hover:border-primary/40 transition-colors"
     :class="{ 'ring-2 ring-primary/30 border-primary': highlightedConfigRun === {{ cr.config_run_id }} }"
     @click="highlightedConfigRun = highlightedConfigRun === {{ cr.config_run_id }} ? null : {{ cr.config_run_id }}">
  <div class="flex items-center gap-2 mb-3">
    <h4 class="text-sm font-semibold text-foreground truncate">
      {{ cr.config_name }}
    </h4>
    {% if cr.is_baseline %}
      <span class="inline-flex items-center rounded-full bg-primary/10 text-primary px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide">baseline</span>
    {% endif %}
    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium
      {% if cr.status == 'complete' %}bg-eval-score-5/10 text-eval-score-5
      {% elif cr.status == 'running' %}bg-amber-500/10 text-amber-600
      {% elif cr.status == 'failed' %}bg-eval-score-1/10 text-eval-score-1
      {% else %}bg-muted text-muted-foreground{% endif %}">
      {{ cr.status }}
    </span>
  </div>

  {% if scoring_enabled %}
  <div class="mb-3">
    <span class="text-2xl font-bold text-foreground">{{ cr.pass_rate|default:"—" }}%</span>
    <span class="text-xs text-muted-foreground ml-1">{{ cr.pass_count|default:"—" }}/{{ cr.total_count|default:"—" }} passed</span>
  </div>
  {% endif %}

  <dl class="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
    <dt class="text-muted-foreground">Avg latency</dt>
    <dd class="text-foreground font-medium text-right">{{ cr.avg_total_latency_seconds|default:"—" }}s</dd>
    <dt class="text-muted-foreground">Avg tokens in</dt>
    <dd class="text-foreground font-medium text-right">{{ cr.avg_input_tokens|default:"—" }}</dd>
    <dt class="text-muted-foreground">Avg tokens out</dt>
    <dd class="text-foreground font-medium text-right">{{ cr.avg_output_tokens|default:"—" }}</dd>
    <dt class="text-muted-foreground">Avg cost</dt>
    <dd class="text-foreground font-medium text-right">${{ cr|avg_cost }}</dd>
    {% if enable_llm_judge %}
    <dt class="text-muted-foreground">Judge pass rate</dt>
    <dd class="text-foreground font-medium text-right">{{ cr.judge_pass_rate|default:"—" }}%</dd>
    {% endif %}
  </dl>
</div>