{% extends "base.html" %}
{% block title %}Run {{ job_id }} — QA Agent{% endblock %}

{% block content %}
<div class="page-header">
  <div class="run-header">
    <div>
      <h1>Test Run <code class="job-id">{{ job_id }}</code></h1>
      <div id="run-meta" class="text-muted"></div>
    </div>
    <div id="run-header" class="run-header-actions" data-job-id="{{ job_id | e }}">
      <span id="status-badge" class="badge badge-queued">Queued</span>
      <button id="stop-btn" class="btn btn-danger" style="display:none">Stop</button>
    </div>
  </div>
</div>

<div class="run-stats card" id="run-stats" style="display:none">
  <div class="stat">
    <span class="stat-value" id="stat-pages">0</span>
    <span class="stat-label">Pages tested</span>
  </div>
  <div class="stat">
    <span class="stat-value" id="stat-findings">0</span>
    <span class="stat-label">Findings</span>
  </div>
  <div class="stat">
    <span class="stat-value" id="stat-elapsed">0:00</span>
    <span class="stat-label">Elapsed</span>
  </div>
  <div class="stat stat-url-wrap">
    <span class="stat-value text-muted" id="stat-url" style="font-size:0.8rem;word-break:break-all"></span>
    <span class="stat-label">Current URL</span>
  </div>
</div>

<div id="complete-banner" class="alert alert-success" style="display:none">
  Test complete. <a id="session-link" href="#">View session results →</a>
</div>
<div id="error-banner" class="alert alert-error" style="display:none"></div>
<div id="stopped-banner" class="alert alert-warning" style="display:none">
  Test stopped by user.
  <span id="stopped-session-link" style="display:none">
    <a id="stopped-link" href="#">View partial results →</a>
  </span>
</div>

<div class="card log-card">
  <div class="log-toolbar">
    <span class="log-title">Output</span>
    <div class="log-filter-group" role="group" aria-label="Log filter">
      <button type="button" class="btn btn-ghost small log-filter active" data-filter="all">All</button>
      <button type="button" class="btn btn-ghost small log-filter" data-filter="finding">Findings</button>
      <button type="button" class="btn btn-ghost small log-filter" data-filter="error">Errors</button>
    </div>
    <label class="check-label small">
      <input type="checkbox" id="autoscroll" checked> Auto-scroll
    </label>
    <button type="button" class="btn btn-ghost small" id="clear-log-btn">Clear</button>
  </div>
  <div id="log" class="log"></div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/run.js"></script>
{% endblock %}