{% extends "base.html" %}
{% block title %}Triage · A/V{% endblock %}
{% block body %}

<header class="topbar">
  <div class="brand">
    <h1 class="brand-title"><a href="https://github.com/alastor0325/firefox-triage-dashboard" target="_blank" rel="noopener">Triage</a></h1>
    <span class="brand-sub"><strong>Audio/Video</strong> · Last updated {{ dateline }}</span>
    {% if not reply_mode() %}<span class="badge-readonly" title="No Bugzilla API key configured — drafts only. Run `bugzilla-cli setup` to enable writing back.">read-only · drafts only</span>{% endif %}
  </div>
  <div class="topbar-right">
    <div class="stats">
      <span class="stat stat--primary"><span class="num">{{ stats.pending_total }}</span><span class="lbl">pending</span></span>
    </div>
    <details id="process-queue-dropdown" class="process-queue-dropdown">
      <summary id="btn-process-queue" class="btn-process-queue"
               aria-haspopup="true">
        Process queue · <span class="queue-count">{{ queue_count }}</span>
        <span class="dropdown-caret" aria-hidden="true">▾</span>
      </summary>
      <div class="queue-dropdown-panel" id="queue-dropdown-panel">
        {% include "_queue_dropdown.html" %}
      </div>
    </details>
  </div>
</header>

<div class="layout">
  <main>
    <div class="tabbar">
      <nav class="tabs" role="tablist">
        {% for slug, marker, label in tabs %}
          {% set count = counts_by_slug[slug] %}
          <a class="tab {% if slug == active_tab and not search_active %}tab--active{% endif %} {% if count == 0 %}tab--empty{% endif %}"
             href="?tab={{ slug }}"
             role="tab"
             aria-selected="{{ 'true' if slug == active_tab and not search_active else 'false' }}"
             hx-get="?tab={{ slug }}"
             hx-target="#tab-content"
             hx-swap="innerHTML"
             hx-push-url="true"
             hx-sync="closest nav:replace">
            <span class="label">{{ label }}</span>
            <span class="count">{{ count }}</span>
          </a>
        {% endfor %}
      </nav>
      {# Global search: filters across ALL sections; results show in the
         rail badged with their section. Native clear (✕) or empty input
         returns to the tab view. #}
      <input class="global-search" type="search" name="q"
             value="{{ search_query }}"
             placeholder="Search id, title, or tag (e.g. new)…"
             aria-label="Search all bugs by id, title, or tag"
             hx-get="/"
             hx-trigger="input changed delay:200ms, search"
             hx-target="#tab-content"
             hx-swap="innerHTML"
             hx-push-url="true"
             hx-sync="this:replace">
    </div>

    <div id="tab-content">
      {% include "_content.html" %}
    </div>
  </main>
</div>

{% endblock %}