{% extends "base.html" %}
{% block title %}Runs{% endblock %}
{% block style %}
  .st { display: inline-block; padding: 2px 9px; border-radius: 10px;
        font-weight: 600; font-size: 12px; background: var(--head); }
  .st.Done { background: var(--pass-bg); color: var(--pass); }
  .st.Run-Error, .st.Ended-without-a-record { background: var(--fail-bg);
                                              color: var(--fail); }
  .st.Stopped { background: var(--review-bg); color: var(--review); }
  .st.Running { background: var(--hilite); color: var(--accent); }
  td .Pass { color: var(--pass); font-weight: 600; }
  td .Fail { color: var(--fail); font-weight: 600; }
  td .Review { color: var(--review); font-weight: 600; }
  td.bad { color: var(--fail); font-weight: 600; }
  td.warn { color: var(--review); font-weight: 600; }
  table.list tbody tr a { color: inherit; display: block; }
  /* Fixed layout takes the header's widths: the time and the login column
     must not be cut at 1180 px. */
  #runs th.w-start { width: 160px; } #runs th.w-who { width: 100px; }
  #runs th.w-src { width: 85px; } #runs th.w-mode { width: 80px; }
  #runs th.w-dur { width: 85px; } #runs th.w-res { width: 135px; }
  #runs th.w-login { width: 150px; } #runs th.w-cat { width: 125px; }
  #runs th.w-err { width: 95px; } #runs th.w-warn { width: 80px; }
  table.list tbody tr a:hover { text-decoration: none; }
{% endblock %}
{% block content %}
<h1>Runs</h1>
<p class="sub">Every bot run since run tracking started (2026-10-22), newest
  first: who started it, how long the eCW login took, and what went wrong.
  Pick a run for its login steps, errors and timeline.</p>
<form class="search card" method="get" action="/runs">
  <label>From <input type="date" name="day_from" value="{{ day_from }}"></label>
  <label>To <input type="date" name="day_to" value="{{ day_to }}"></label>
  <label>Result
    <select name="status">
      <option value="">All</option>
      {% for s in statuses %}<option value="{{ s }}"{% if s == status %} selected{% endif %}>{{ s }}</option>{% endfor %}
    </select>
  </label>
  <button type="submit">Show</button>
  {% if day_from or day_to or status %}<a href="/runs">Clear</a>{% endif %}
</form>
{% if runs %}
<table class="list" id="runs">
  <thead><tr>
    <th class="w-start">Started</th><th class="w-who">Started By</th>
    <th class="w-src">Source</th><th class="w-mode">Mode</th>
    <th class="w-dur">Duration</th><th class="w-res">Result</th>
    <th class="w-login">eCW login</th><th class="w-cat">Pass / Fail / Review</th>
    <th class="w-err">Claim Errors</th><th class="w-warn">Warnings</th>
  </tr></thead>
  <tbody>
  {% for r in runs %}
  <tr>
    <td><a href="/runs/{{ r.run_id }}">{{ r.started | usdate }}</a></td>
    <td>{{ r.started_by }}</td>
    <td>{{ r.source | capitalize }}</td>
    <td>{{ r.mode }}</td>
    <td>{{ r.duration_s | dur }}</td>
    <td><span class="st {{ r.status | replace(' ', '-') }}">{{ r.status }}</span>{% if r.status == "Run Error" %} exit {{ r.exit_code }}{% endif %}</td>
    <td>{{ r.login_attempts | length }} attempt{{ "" if r.login_attempts | length == 1 else "s" }}{% if r.login_attempts %} · {{ r.login_total_s | dur }}{% endif %}</td>
    <td><span class="Pass">{{ r.pass }}</span> / <span class="Fail">{{ r.fail }}</span> / <span class="Review">{{ r.review }}</span></td>
    <td class="{{ 'bad' if r.claim_errors else '' }}">{{ r.claim_errors | length }}</td>
    <td class="{{ 'warn' if r.warnings else '' }}">{{ r.warnings | length }}</td>
  </tr>
  {% endfor %}
  </tbody>
</table>
{% else %}
<div class="empty">No runs{% if day_from or day_to or status %} match{% else %} tracked yet{% endif %}.
  Runs from before 2026-10-22 are not tracked; every run from now on is.</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
  // A click anywhere on a row opens that run.
  document.querySelectorAll('#runs tbody tr').forEach(tr => {
    tr.addEventListener('click', () => {
      const a = tr.querySelector('a'); if (a) location.href = a.href;
    });
  });
</script>
{% endblock %}