{% extends "base.html" %}
{% block title %}Voxint — home{% endblock %}

{% block cb_breadcrumb %}home{% endblock %}
{% block cb_summary %}{{ date_summary }} · everything running locally{% endblock %}
{% block cb_actions %}
<a class="cb-btn cb-btn-primary" href="{% if shell.media_enabled %}/media{% else %}/runs#add-media{% endif %}">+ Add media</a>
{% endblock %}

{% block body %}
<section class="oc-section" aria-label="Needs your attention">
  <h2 class="oc-section-title">NEEDS YOUR ATTENTION</h2>
  <div class="attention-cards">
    <div class="attention-card{% if review_backlog %} attention-warn{% endif %}">
      <span class="attention-count">{{ review_backlog }}</span>
      <div class="attention-body">
        <strong class="attention-label">recordings to review</strong>
        <span class="attention-note">finished, waiting on speaker decisions</span>
      </div>
      {% if review_backlog %}<a class="attention-arrow" href="/review" aria-label="Review recordings">→</a>{% endif %}
    </div>
    <div class="attention-card{% if unresolved_voices %} attention-warn{% endif %}">
      <span class="attention-count">{{ unresolved_voices }}</span>
      <div class="attention-body">
        <strong class="attention-label">voices without a name</strong>
        <span class="attention-note">across reviewed recordings</span>
      </div>
      {% if unresolved_voices %}<a class="attention-arrow" href="/speakers" aria-label="Review speakers">→</a>{% endif %}
    </div>
    <div class="attention-card{% if failed_runs %} attention-danger{% endif %}">
      <span class="attention-count">{{ failed_runs }}</span>
      <div class="attention-body">
        <strong class="attention-label">failed runs</strong>
        <span class="attention-note">{% if failed_runs %}stopped with an error{% else %}nothing broke{% endif %}</span>
      </div>
      {% if failed_runs %}<a class="attention-arrow" href="{% if shell.jobs_enabled %}/jobs?filter=failed{% else %}/runs?status=failed{% endif %}" aria-label="View failed runs">→</a>{% endif %}
    </div>
  </div>
</section>

<section class="oc-section" aria-label="Start something">
  <h2 class="oc-section-title">START SOMETHING</h2>
  <div class="start-actions">
    <a class="start-btn" href="{% if shell.media_enabled %}/media{% else %}/runs#add-media{% endif %}">Upload a recording</a>
    <a class="start-btn" href="/settings#folders">Watch a folder</a>
    {% if shell.projects_enabled %}<a class="start-btn" href="/projects">New project</a>{% endif %}
    <a class="start-btn" href="/speakers">Review speakers</a>
  </div>
</section>

<section class="oc-section" aria-label="Activity">
  <div class="oc-section-header">
    <h2 class="oc-section-title">ACTIVITY</h2>
    <div class="time-window">
      <div class="tw-segments" role="radiogroup" aria-label="Time window">
        {% for value, label in windows %}
        <a class="tw-seg{% if value == window %} is-active{% endif %}" href="/?window={{ value }}" role="radio" aria-checked="{{ 'true' if value == window else 'false' }}">{{ label }}</a>
        {% endfor %}
      </div>
    </div>
  </div>
  {% if window_invalid %}
  <p class="oc-muted">Unrecognized window value, showing the last day.</p>
  {% endif %}
  <div class="oc-stat-tiles">
    <div class="oc-stat-tile">
      <div class="tile-value">{{ counts.media_added }}</div>
      <div class="tile-label">MEDIA ADDED</div>
    </div>
    <div class="oc-stat-tile">
      <div class="tile-value">{{ counts.runs_started }}</div>
      <div class="tile-label">JOBS RUN</div>
    </div>
    <div class="oc-stat-tile">
      <div class="tile-value">{{ counts.speakers_enrolled }}</div>
      <div class="tile-label">SPEAKERS IDENTIFIED</div>
    </div>
    <div class="oc-stat-tile">
      <div class="tile-value">{{ counts.minutes_transcribed }}<span class="tile-unit">min</span></div>
      <div class="tile-label">TRANSCRIBED</div>
    </div>
  </div>
</section>

<section class="oc-section" aria-label="Recent activity">
  <h2 class="oc-section-title">RECENT</h2>
  {% if activity %}
  <div class="recent-feed">
    {% for item in activity %}
    <div class="recent-row">
      <span class="recent-time" title="{{ item.at.strftime('%Y-%m-%d %H:%M UTC') }}">{{ format_clock_time(item.at, now=now) }}</span>
      <span class="recent-body">
        {% if item.kind == "run_completed" %}
        Run finished — <a href="{% if shell.jobs_enabled %}/jobs/{{ item.run_id }}{% else %}/runs/{{ item.run_id }}{% endif %}">{{ friendly_media_label(item.title, item.source_path) }}</a>{% if item.unresolved_count %} <span class="chip chip-warn">{{ item.unresolved_count }} voice{{ "s" if item.unresolved_count != 1 else "" }} need you</span>{% endif %}
        {% elif item.kind == "run_failed" %}
        Run failed — <a href="{% if shell.jobs_enabled %}/jobs/{{ item.run_id }}{% else %}/runs/{{ item.run_id }}{% endif %}">{{ friendly_media_label(item.title, item.source_path) }}</a>
        {% elif item.kind == "run_started" %}
        Run started — <a href="{% if shell.jobs_enabled %}/jobs/{{ item.run_id }}{% else %}/runs/{{ item.run_id }}{% endif %}">{{ friendly_media_label(item.title, item.source_path) }}</a>
        {% elif item.kind == "speaker_enrolled" %}
        Speaker verified — <a href="/speakers">{{ item.title }}</a>
        {% endif %}
      </span>
      <span class="recent-action">
        {% if item.kind == "run_completed" %}
        <a href="/review">Review →</a>
        {% elif item.run_id %}
        <a href="{% if shell.jobs_enabled %}/jobs/{{ item.run_id }}{% else %}/runs/{{ item.run_id }}{% endif %}">View →</a>
        {% elif item.speaker_id %}
        <a href="/speakers">View →</a>
        {% endif %}
      </span>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="oc-muted">No recent activity. Add a recording to get started.</p>
  {% endif %}
</section>
{% endblock %}