{% extends "base.html" %}
{% block title %}Harness x Model Matrix — AgentArena{% endblock %}

{% block content %}
<div class="hero" style="padding-bottom:16px;">
  <h1>Harness x Model Matrix</h1>
  <p>Same LLM, different harnesses — who works cleaner, faster, cheaper?</p>
</div>

{% if harnesses and models %}
<div class="table-wrapper mb-24">
  <table>
    <thead>
      <tr>
        <th>Harness</th>
        {% for model in models %}
        <th style="text-align:center;">{{ model }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for harness in harnesses %}
      <tr>
        <td>
          <a href="/harness/{{ harness }}"><strong>{{ harness }}</strong></a>
        </td>
        {% for model in models %}
        {% set key = harness ~ "|" ~ model %}
        {% set cell = cells.get(key) %}
        <td style="text-align:center; padding:8px 12px;">
          {% if cell %}
          <div style="margin-bottom:4px;">
            <div class="score-bar" style="justify-content:center;">
              <span style="min-width:40px; font-weight:700; {% if cell.pass_at_1 >= 0.7 %}color:var(--success){% elif cell.pass_at_1 >= 0.4 %}color:var(--warning){% else %}color:var(--error){% endif %}">
                {{ "%.0f"|format(cell.pass_at_1 * 100) }}%
              </span>
            </div>
            <div style="font-size:10px; color:var(--muted);">pass@1</div>
          </div>
          {% if cell.avg_composite is not none %}
          <div style="margin-bottom:2px;">
            <span class="mono" style="font-size:12px; {% if cell.avg_composite >= 0.7 %}color:var(--success){% elif cell.avg_composite >= 0.4 %}color:var(--warning){% else %}color:var(--error){% endif %}">
              {{ "%.0f"|format(cell.avg_composite * 100) }}%
            </span>
            <span style="font-size:10px; color:var(--muted);">comp</span>
          </div>
          {% endif %}
          <div style="font-size:11px; color:var(--muted);">
            ${{ "%.4f"|format(cell.avg_cost) }}
            <span style="margin-left:4px;">{{ "%.0f"|format(cell.avg_duration) }}s</span>
            <span style="margin-left:4px;">{{ cell.total_runs }}r</span>
          </div>
          {% else %}
          <span class="text-muted" style="font-size:18px;">—</span>
          {% endif %}
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Legend -->
<div class="card" style="padding:16px 20px;">
  <div style="font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px;">
    Legend
  </div>
  <div style="display:flex; gap:24px; flex-wrap:wrap; font-size:13px; color:var(--muted);">
    <span><strong style="color:var(--success);">70%+</strong> = strong</span>
    <span><strong style="color:var(--warning);">40-69%</strong> = moderate</span>
    <span><strong style="color:var(--error);">&lt;40%</strong> = weak</span>
    <span><strong>pass@1</strong> = reliability</span>
    <span><strong>comp</strong> = composite score</span>
    <span><strong>r</strong> = total runs</span>
  </div>
</div>

{% else %}
<div class="card">
  <div class="empty">
    <h3>No data yet</h3>
    <p>Run benchmarks with different harness/model combinations to populate the matrix.</p>
    <a href="/" class="btn btn-primary">Go to Leaderboard</a>
  </div>
</div>
{% endif %}

<!-- Harness Steckbriefe -->
{% if harnesses %}
<h2 style="margin-top:32px;">Harness Reports</h2>
<div style="display:flex; gap:12px; flex-wrap:wrap;">
  {% for harness in harnesses %}
  <a href="/harness/{{ harness }}" class="btn btn-secondary">{{ harness }}</a>
  {% endfor %}
</div>
{% endif %}
{% endblock %}