{% extends "base.html" %}
{% block main %}
<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:16px">
  <div><div class="eyebrow">Benchmarks</div><h1>Runs</h1>
    <p class="muted" style="margin:0">Every benchmark you ran, newest first.</p></div>
  <a class="button" href="/runs/new">New run</a>
</div>

{% if active %}
<div class="card" style="margin-top:24px">
  <span class="badge running"><span class="spinner"></span>running</span>
  Run {{ active.run_id or "" }} is in progress{% if active.source %} (started from {{ active.source }}){% endif %}.
  {% if active.run_id %}<a href="/runs/{{ active.run_id }}/live">Follow it</a>{% endif %}
</div>
{% endif %}

{% if runs %}
<div class="card" style="padding:6px 8px;margin-top:24px">
<table>
  <thead><tr><th>Run</th><th>Started</th><th>Model</th><th>Label</th><th>Status</th><th></th></tr></thead>
  <tbody>
  {% for r in runs %}
  {% set badge = {"done": "ok", "running": "running", "failed": "bad", "cancelled": "warn", "interrupted": "warn"}.get(r.status, "") %}
  <tr class="row-link" data-href="{{ '/runs/%s/live' % r.id if r.status == 'running' else '/runs/%s' % r.id }}">
    <td class="meta">#{{ r.id }}</td>
    <td class="meta">{{ r.started_at[:16].replace("T", " ") }}</td>
    <td>{{ r.served_model or "" }}<div class="meta">{{ r.base_url }}</div></td>
    <td>{% if r.id == demo_id %}<span class="badge">demo</span> <span class="muted small">sample run shipped with kneebench</span>{% else %}{{ r.label or "" }}{% endif %}</td>
    <td><span class="badge {{ badge }}">{% if r.status == "running" %}<span class="spinner"></span>{% endif %}{{ r.status }}</span></td>
    <td style="text-align:right;white-space:nowrap">{% if r.status == "running" %}<a href="/runs/{{ r.id }}/live">Follow</a>{% else %}<a href="/runs/{{ r.id }}">Report</a>
      <form method="post" action="/runs/{{ r.id }}/delete" style="display:inline"
            onsubmit="return confirm('Delete run #{{ r.id }} and its measurements? This cannot be undone.')">
        <button class="link-danger" type="submit" title="Delete this run">Delete</button></form>{% endif %}</td>
  </tr>
  {% endfor %}
  </tbody>
</table>
</div>
{% set finished = runs | selectattr("status", "equalto", "done") | list %}
{% if finished | length >= 2 %}
<form method="get" action="/compare" class="card compare-form" style="margin-top:16px">
  <b>Compare</b>
  <select name="a" aria-label="Before">{% for r in finished %}<option value="{{ r.id }}"{% if loop.index == 2 %} selected{% endif %}>#{{ r.id }}{% if r.label %} {{ r.label }}{% endif %}</option>{% endfor %}</select>
  <span class="muted">before, and</span>
  <select name="b" aria-label="After">{% for r in finished %}<option value="{{ r.id }}"{% if loop.first %} selected{% endif %}>#{{ r.id }}{% if r.label %} {{ r.label }}{% endif %}</option>{% endfor %}</select>
  <span class="muted">after</span>
  <button type="submit" class="secondary">Compare</button>
</form>
{% endif %}
{% else %}
<div class="card empty" style="margin-top:24px">
  <h3>No benchmarks yet</h3>
  <p class="muted">Point kneebench at an OpenAI-compatible vLLM endpoint. It works out what the
    hardware allows, measures what you get, and explains the gap.</p>
  <p><a class="button" href="/runs/new">Start your first benchmark</a>
     <a class="button secondary" href="/doctor">Check your setup</a></p>
</div>
{% endif %}
{% endblock %}