{% extends "base.html" %}
{% block title %}Voxint — dashboard{% endblock %}
{% block body %}
<h1>Dashboard</h1>
<p class="muted">A quick look at your recordings.</p>

{# Task-first entry (issue #117 Phase C): the three things a first-run operator
   actually does, rendered first, above the metrics. These counts are STATIC — the
   15s htmx poll below refreshes the detail tables, not this list, so the Continue
   count never looks live while sitting outside the poll (a live-looking but stale
   number is worse than a plainly static one). #}
<ul class="task-cards" aria-label="What would you like to do?">
  <li class="task-card">
    <a class="task-link" href="/runs#add-media">
      <span class="task-title">Add audio</span>
      <span class="task-note">Upload a recording, or fetch one from a link.</span>
    </a>
  </li>
  <li class="task-card">
    <a class="task-link" href="/review">
      <span class="task-title">Continue review ({{ review_backlog }})</span>
      <span class="task-note">
        {%- if review_backlog -%}
        Recordings that finished and still need you to confirm who is speaking.
        {%- else -%}
        Nothing is waiting for review right now.
        {%- endif -%}
      </span>
    </a>
  </li>
  <li class="task-card">
    {% if last_completed %}
    <a class="task-link" href="/runs/{{ last_completed.run_id }}">
      <span class="task-title">Last finished run</span>
      <span class="task-note">{{ friendly_media_label(last_completed.title, last_completed.source_path) }}</span>
    </a>
    {% else %}
    <div class="task-link is-empty">
      <span class="task-title">Last finished run</span>
      <span class="task-note">No recordings have finished yet.</span>
    </div>
    {% endif %}
  </li>
</ul>

{# Disclosure carve-outs (issue #117 Phase C, codex): an error the operator must
   see and an input they use are never hidden, so the ?since= notice and the
   time-window <select> stay OUTSIDE the <details> below. #}
{% if since_invalid %}
<p class="notice">Unrecognized <code>?since=</code> value — showing the last 24 hours.</p>
{% endif %}

{# In-page window picker (issue #56). Options are exactly the strings parse_since
   already accepts, so this needs no new parsing; an empty ?since= defaults to
   24h, so "24h" is selected then too. A plain GET reloads the page, which
   re-seeds the 15s htmx poll below with the chosen window. It belongs with the
   run details it filters, but stays outside the disclosure so it is always
   usable. #}
<form method="get" action="/dashboard" class="filters">
  <label>Time window
    <select name="since" onchange="this.form.submit()">
      <option value="24h"{% if since_param in ("", "24h") %} selected{% endif %}>Last 24 hours</option>
      <option value="7d"{% if since_param == "7d" %} selected{% endif %}>Last 7 days</option>
      <option value="30d"{% if since_param == "30d" %} selected{% endif %}>Last 30 days</option>
      {# A valid ?since= that isn't one of the presets (e.g. 48h or an ISO
         datetime, honoured by parse_since) is still the *active* window — echo
         it as a selected option so the control never shows a shorter span than
         the data actually reflects. An invalid value is cleared upstream
         (since_param==""), so it never reaches here. #}
      {% if since_param and since_param not in ("24h", "7d", "30d") %}
      <option value="{{ since_param }}" selected>Custom ({{ since_param }})</option>
      {% endif %}
    </select>
  </label>
  <noscript><button type="submit">Apply</button></noscript>
</form>

{# Throughput and stage metrics demoted behind disclosure (issue #117 Phase C):
   the stat cards and the runs-by-status / stage-timing / stage-failure tables are
   reference detail, not the first-run task, so they live inside "Show run
   details". The htmx poll re-requests /dashboard every 15s; the route answers the
   HX-Request with just the fragment, swapped into this container so the page
   chrome and nav are untouched. The active ?since= is baked into the poll URL so
   a custom window survives the refresh. innerHTML swaps the contents, so this
   polling container — and its hx-get — persists unchanged across polls. #}
<details class="run-details">
  <summary>Show run details</summary>
  <div id="dashboard-metrics"
       hx-get="/dashboard{% if since_param %}?since={{ since_param | urlencode }}{% endif %}"
       hx-trigger="every 15s" hx-swap="innerHTML">
    {% include "fragments/dashboard_metrics.html" %}
  </div>
</details>
{% endblock %}