{% extends "base.html" %}
{% block title %}Run {{ run.run_id }} · Striatum{% endblock %}
{% block main %}
<section class="page-section">
  <header class="run-header">
    <h1>Run <code>{{ run.run_id }}</code></h1>
    <div class="run-meta">
      <span class="status-pill status-{{ run.state }}">{{ run.state }}</span>
      {% if run.branch_name %}
      <span class="muted">on <code>{{ run.branch_name }}</code></span>
      {% endif %}
      {% if run.paused_at %}
      <span class="status-pill posture-chip" title="paused at {{ run.paused_at }}">paused</span>
      {% endif %}
      {% if run.state in ('prepared', 'needs_branch_confirmation', 'ready', 'running') %}
        {% if run.paused_at %}
        <button type="button" id="run-resume-btn" class="primary-button" data-run-id="{{ run.run_id }}" data-action="resume">Resume run</button>
        {% else %}
        <button type="button" id="run-pause-btn" class="secondary-button" data-run-id="{{ run.run_id }}" data-action="pause">Pause run</button>
        {% endif %}
      <button type="button" id="run-cancel-btn" class="secondary-button" data-run-id="{{ run.run_id }}">Cancel run</button>
      <script defer src="/static/run_cancel.js"></script>
      <script defer src="/static/run_pause_resume.js"></script>
      {% endif %}
    </div>
    {% if run.state == "needs_branch_confirmation" %}
    <div class="branch-confirm-panel" data-run-id="{{ run.run_id }}" data-branch="{{ suggested_branch_name or run.branch_name or '' }}">
      <p class="muted">This run is waiting for branch confirmation.</p>
      <label>Branch <input type="text" id="bc-branch" value="{{ suggested_branch_name or run.branch_name or '' }}"></label>
      <label><input type="checkbox" id="bc-create" checked> Create if missing</label>
      <label><input type="checkbox" id="bc-use-current"> Use current git branch</label>
      <button type="button" id="bc-confirm-btn" class="primary-button">Confirm and start</button>
      <span id="bc-status" class="muted"></span>
    </div>
    <script defer src="/static/run_branch_confirm.js"></script>
    {% endif %}
  </header>

  {% if next_actions and run.state not in ('completed', 'failed', 'canceled') %}
  <section class="next-actions-banner" role="region" aria-label="Next actions" tabindex="0">
    <h2>Next actions</h2>
    <ul class="next-actions">
      {% for action in next_actions %}
      <li>{{ action }}</li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  <div class="run-grid">
    <aside class="run-jobs-rail">
      <h2>Jobs</h2>
      <ul class="job-list">
        {% for job in jobs %}
        <li>
          <a href="/run/{{ run.run_id }}/job/{{ job.job_id }}" class="job-link">
            <span class="status-pill status-{{ job.state }}">{{ job.state }}</span>
            <span class="job-name">{{ job.workflow_job_id }}</span>
          </a>
        </li>
        {% endfor %}
      </ul>
    </aside>

    <article class="run-center">
      <h2>Status</h2>
      <dl class="kv-grid">
        <dt>State</dt><dd>{{ run.state }}</dd>
        <dt>Created</dt><dd>{% if run.created_at %}<time datetime="{{ run.created_at }}">{{ run.created_at }}</time>{% else %}—{% endif %}</dd>
        <dt>Started</dt><dd>{% if run.started_at %}<time datetime="{{ run.started_at }}">{{ run.started_at }}</time>{% else %}—{% endif %}</dd>
        <dt>Completed</dt><dd>{% if run.completed_at %}<time datetime="{{ run.completed_at }}">{{ run.completed_at }}</time>{% else %}—{% endif %}</dd>
      </dl>

      {% if verdicts_by_posture %}
      <h2>Verdicts by posture</h2>
      <ul class="posture-list">
        {% for posture, count in verdicts_by_posture.items() %}
        <li>
          <a href="/run/{{ run.run_id }}/posture/{{ posture }}" class="posture-chip-link">
            <span class="posture-chip">{{ posture }}</span>
          </a>
          <span class="muted">{{ count }}</span>
        </li>
        {% endfor %}
      </ul>
      {% endif %}

    </article>

    <aside class="run-graph-rail">
      <h2>Graph</h2>
      <div class="graph-container">
        {{ graph_svg | safe }}
      </div>
    </aside>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script defer src="/static/run_detail.js"></script>
{% endblock %}