{% extends "base.html" %}
{% from "fragments/_chips.html" import chip, needs_you_chip %}
{% block title %}Voxint — jobs{% endblock %}

{% block cb_breadcrumb %}jobs /{% endblock %}
{% block cb_summary %}{{ pipeline_summary }}{% endblock %}
{% block cb_actions %}{% endblock %}

{% block body %}
<section class="oc-section" aria-label="Pipeline board">
  <div class="pipeline-board" role="region" aria-label="Pipeline stages">
    {% for stage in display_stages %}
    <div class="pipeline-cell{% if stage.is_degraded %} is-degraded{% elif stage.active %} is-active{% endif %}">
      <div class="pc-header">
        <span class="pc-dot {% if stage.is_degraded %}pc-dot-warn{% elif stage.active or stage.queued %}pc-dot-ok{% else %}pc-dot-idle{% endif %}"></span>
        <span class="pc-stage">{{ stage.label }}</span>
      </div>
      {% if stage.is_degraded %}
      <div class="pc-count">{{ stage.active + stage.queued }}</div>
      <div class="pc-sub">{% if stage.active %}{{ stage.active }} active · {% endif %}paused</div>
      {% elif stage.active %}
      <div class="pc-count">{{ stage.active }} <span style="font-size:var(--t-sm);color:var(--ink-2)">active</span></div>
      <div class="pc-sub">{{ stage.queued }} waiting{% if stage.wait_estimate_seconds is not none %} · ~{{ format_compact_duration(stage.wait_estimate_seconds) }}{% endif %}</div>
      {% elif stage.queued %}
      <div class="pc-count">{{ stage.queued }}</div>
      <div class="pc-sub">waiting{% if stage.wait_estimate_seconds is not none %} · ~{{ format_compact_duration(stage.wait_estimate_seconds) }}{% endif %}</div>
      {% else %}
      <div class="pc-count">0</div>
      <div class="pc-sub">idle</div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</section>

{% for d in degraded %}
<div class="degraded-banner" role="alert">
  <div class="db-text">
    <strong>{{ d.consequence }}</strong> {{ d.detail }}
  </div>
  <a class="cb-btn cb-btn-secondary" href="/settings">Turn on in Settings</a>
</div>
{% endfor %}

<section class="oc-section" aria-label="Recent runs">
  <h2 class="oc-section-title">RECENT RUNS</h2>
  <div class="filter-tabs" role="tablist" aria-label="Run filter">
    {% for key, label in filter_labels %}
    <a href="/jobs?filter={{ key }}" role="tab" {% if key == active_filter %}aria-current="true"{% endif %}>{{ label }}</a>
    {% endfor %}
    <span class="ft-spacer"></span>
    <a href="/runs?archived=1" style="font-size:var(--t-sm);color:var(--accent);text-decoration:none">Archived →</a>
  </div>

  {% if not runs %}
  <p class="oc-muted">No runs{% if active_filter != "all" %} matching this filter{% endif %}. Add a recording from the <a href="{% if shell.media_enabled %}/media{% else %}/runs{% endif %}">Media</a> page.</p>
  {% else %}
  <div class="grid-table" style="grid-template-columns: 1fr auto auto auto auto auto;">
    <div class="gt-header">
      <span>MEDIA</span>
      <span>STATUS</span>
      <span>REVIEW</span>
      <span>STARTED</span>
      <span style="text-align:right">TOOK</span>
      <span></span>
    </div>
    {% for item in runs %}
    <div class="gt-row{% if item.status == 'running' %} is-machine-active{% elif item.unresolved_count > 0 and item.status == 'completed' %} is-needs-human{% endif %}">
      <span>
        <a href="/jobs/{{ item.run_id }}" style="color:var(--ink);text-decoration:none">{{ friendly_media_label(item.title, item.source_path) }}</a>
        {% if item.folder_path %}<br><span class="oc-muted" style="font-size:var(--t-sm)">{{ item.folder_path }}</span>{% endif %}
      </span>
      <span>{{ chip(humanize_status(item.status)) }}</span>
      <span>
        {% if item.status == "completed" and item.unresolved_count > 0 %}
        {{ needs_you_chip(item.unresolved_count) }}
        {% elif item.status == "completed" %}
        {{ chip("reviewed") }}
        {% elif item.status == "failed" and item.error %}
        <span class="oc-muted" style="font-size:var(--t-sm)">{{ humanize_error(item.error) or "—" }}</span>
        {% else %}
        —
        {% endif %}
      </span>
      <span class="num">{{ format_age(item.created_at, now=now) }}</span>
      <span class="num">{{ format_compact_duration(item.elapsed_seconds) }}</span>
      <span class="gt-action">
        {% if item.status == "completed" and item.unresolved_count > 0 %}
        <a href="/review">Review →</a>
        {% elif item.status == "failed" %}
        <a href="/jobs/{{ item.run_id }}">Retry →</a>
        {% else %}
        <a href="/jobs/{{ item.run_id }}">View →</a>
        {% endif %}
      </span>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</section>

<section class="oc-section" aria-label="Other jobs">
  <h2 class="oc-section-title">OTHER JOBS</h2>
  <p class="oc-muted">The most recent asset, translation, voice sample, and research
  jobs. These run alongside the pipeline and never block it.</p>
  {% if not aux_jobs %}
  <p class="oc-muted">No auxiliary jobs yet.</p>
  {% else %}
  <div class="grid-table" style="grid-template-columns: auto auto auto auto auto;">
    <div class="gt-header">
      <span>KIND</span>
      <span>DETAIL</span>
      <span>STATUS</span>
      <span>TARGET</span>
      <span>CREATED</span>
    </div>
    {% for job in aux_jobs %}
    <div class="gt-row">
      <span>{{ job.family }}</span>
      <span>{{ job.detail or "—" }}</span>
      <span>{{ chip(job.status) }}</span>
      <span>
        {% if job.family == "research" and job.speaker_id %}<a href="/speakers/{{ job.speaker_id }}/research">speaker {{ job.speaker_id.hex[:8] }}</a>
        {% elif job.pipeline_run_id %}<a href="/jobs/{{ job.pipeline_run_id }}">run {{ job.pipeline_run_id.hex[:8] }}</a>
        {% elif job.speaker_id %}speaker {{ job.speaker_id.hex[:8] }}
        {% else %}—{% endif %}
      </span>
      <span class="num">{{ format_age(job.created_at, now=now) }}</span>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</section>
{% endblock %}