{% extends "base.html" %}
{% block title %}Runs{% endblock %}
{% block content %}

<div class="page-header">
  <h1>Recent Runs</h1>
  <span class="live-badge">● live</span>
</div>

{% if runs %}
<table class="run-table">
  <thead>
    <tr>
      <th class="th-check"></th>
      <th>Run ID</th>
      <th>Function</th>
      <th>Started</th>
      <th>Duration</th>
      <th>Spans</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody
    id="run-tbody"
    hx-get="/"
    hx-trigger="every 5s"
    hx-select="#run-tbody"
    hx-swap="outerHTML">
    {% for run in runs %}
    <tr class="run-row">
      <td class="td-check" onclick="event.stopPropagation()">
        <input type="checkbox" class="run-check" data-id="{{ run.id }}">
      </td>
      <td class="mono dimmed" onclick="window.location='/run/{{ run.id }}'">{{ run.id[:8] }}…</td>
      <td class="mono" onclick="window.location='/run/{{ run.id }}'">{{ run.name }}</td>
      <td class="dimmed" onclick="window.location='/run/{{ run.id }}'">{{ run.started_at.strftime('%H:%M:%S') }}</td>
      <td class="mono" onclick="window.location='/run/{{ run.id }}'">{{ run.duration_ms }}ms</td>
      <td class="dimmed" onclick="window.location='/run/{{ run.id }}'">{{ run.span_count }}</td>
      <td onclick="window.location='/run/{{ run.id }}'">
        {% if run.status == 'ok' %}
          <span class="badge badge-ok">ok</span>
        {% elif run.status == 'error' %}
          <span class="badge badge-error">error</span>
        {% else %}
          <span class="badge badge-running">running</span>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div id="compare-bar" class="compare-bar hidden">
  <a id="compare-link" class="compare-bar-btn" href="#">Compare selected →</a>
</div>

<script>
(function() {
  function updateCompareBar() {
    var checked = document.querySelectorAll('.run-check:checked');
    var bar = document.getElementById('compare-bar');
    var link = document.getElementById('compare-link');

    if (checked.length === 2) {
      bar.classList.remove('hidden');
      var ids = [checked[0].dataset.id, checked[1].dataset.id];
      link.href = '/compare?a=' + ids[0] + '&b=' + ids[1];
      link.textContent = 'Compare selected →';
      link.classList.remove('disabled');
    } else {
      bar.classList.remove('hidden');
      link.href = '#';
      link.classList.add('disabled');
      if (checked.length === 0) {
        bar.classList.add('hidden');
      } else if (checked.length === 1) {
        link.textContent = 'Select 1 more run';
      } else {
        link.textContent = 'Pick exactly 2 to compare';
      }
    }
  }

  document.addEventListener('change', function(e) {
    if (e.target.classList.contains('run-check')) {
      updateCompareBar();
    }
  });

  document.body.addEventListener('htmx:afterSwap', function() {
    updateCompareBar();
  });
})();
</script>

{% else %}
<div class="empty-state">
  <div class="bracket-label" style="margin-bottom:16px"><span class="code">[ GET STARTED ]</span></div>
  <p class="empty-state-msg">No traces yet. Add <span class="mono accent">@trace</span> to any function and run it — your first trace will appear here automatically.</p>
  <pre class="empty-code">from glasspipe import trace

@trace
def my_agent(question):
    return "your answer here"

my_agent("hello")</pre>
  <p class="empty-hint">Then run: <span class="mono">glasspipe dashboard</span></p>
</div>
{% endif %}

{% endblock %}