{{template "head" "Runs"}}
{{template "nav" "runs"}}

<style>
.run-section{margin-bottom:2.5rem}
.run-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.run-header h2{font-size:1.125rem;font-weight:700;color:var(--text);margin:0}
.run-header .model-badge{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-radius:4px;background:rgba(124,111,240,.15);color:var(--accent)}
.run-header .run-id{font-size:.75rem;color:var(--muted);font-family:"SF Mono",Consolas,monospace}
.chart-container{margin-bottom:1.25rem}
.chart-container h3{font-size:.8125rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.625rem}
.chart-card{border:1px solid var(--border);border-radius:8px;padding:1rem;background:var(--surface);overflow-x:auto}
.run-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-bottom:1.25rem}
.run-stat{padding:.75rem 1rem;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.run-stat .label{font-size:.6875rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
.run-stat .value{font-size:1.5rem;font-weight:700;line-height:1.2}
.run-stat .sub{font-size:.75rem;color:var(--muted);margin-top:.125rem}
</style>

<h2 class="section-title">Training Runs</h2>

{{$b := .Benchmarks}}

{{if not $b.Runs}}
<div class="card empty">
  <p>No benchmark data available. InfluxDB data refreshes every 60 seconds.</p>
</div>
{{else}}

{{range $b.Runs}}
{{$rid := .RunID}}
{{$mdl := .Model}}

<div class="run-section" id="{{$rid}}">
  <div class="run-header">
    <h2>{{$mdl}}</h2>
    <span class="model-badge">{{.Type}}</span>
    <span class="run-id">{{$rid}}</span>
  </div>

  {{/* Summary stats */}}
  <div class="run-summary">
    {{if hasKey $b.Loss $rid}}
    {{$loss := getLoss $b.Loss $rid}}
    <div class="run-stat">
      <div class="label">Loss Points</div>
      <div class="value">{{len $loss}}</div>
      <div class="sub">val + train</div>
    </div>
    {{end}}

    {{if hasContentKey $b.Content $rid}}
    {{$content := getContent $b.Content $rid}}
    <div class="run-stat">
      <div class="label">Content Scores</div>
      <div class="value">{{len $content}}</div>
      <div class="sub">dimension scores</div>
    </div>
    {{end}}

    {{if hasCapKey $b.Capability $rid}}
    {{$cap := getCap $b.Capability $rid}}
    <div class="run-stat">
      <div class="label">Capability Tests</div>
      <div class="value">{{len $cap}}</div>
      <div class="sub">benchmark points</div>
    </div>
    {{end}}
  </div>

  {{/* Training Loss Chart */}}
  {{if hasKey $b.Loss $rid}}
  <div class="chart-container">
    <h3>Training Loss Curve</h3>
    <div class="chart-card">
      {{lossChart (getLoss $b.Loss $rid)}}
    </div>
  </div>
  {{end}}

  {{/* Content Score Chart */}}
  {{if hasContentKey $b.Content $rid}}
  <div class="chart-container">
    <h3>Content Scores by Dimension</h3>
    <div class="chart-card">
      {{contentChart (getContent $b.Content $rid)}}
    </div>
  </div>
  {{end}}

  {{/* Capability Chart */}}
  {{if hasCapKey $b.Capability $rid}}
  <div class="chart-container">
    <h3>Capability Benchmark</h3>
    <div class="chart-card">
      {{capabilityChart (getCap $b.Capability $rid)}}
    </div>
  </div>

  <div class="chart-container">
    <h3>Category Breakdown</h3>
    <div class="chart-card">
      {{categoryBreakdown (getCap $b.Capability $rid) (getCapJudge $b.CapabilityJudge $rid)}}
    </div>
  </div>
  {{end}}

</div>
{{end}}

{{end}}

{{template "footer"}}
