{% extends "base.html" %}
{% block title %}Specs{% endblock %}
{% block content %}
<section class="page-head">
  <h1>Specs</h1>
  <p class="page-sub" id="page-sub">
    {{ specs|length }} spec{{ '' if specs|length == 1 else 's' }}
    across {{ roots|length }} root{{ '' if roots|length == 1 else 's' }}.
    {% if allow_run %}
      Click a status chip to flip it.
    {% else %}
      Read-only mode — restart without <code>--read-only</code> to edit statuses.
    {% endif %}
  </p>
</section>

{% if roots %}
  <p class="meta-line">
    Reading from
    {% for root in roots %}
      <code>{{ root }}</code>{% if not loop.last %}, {% endif %}
    {% endfor %}
  </p>
{% endif %}

{# "Ready to close?" section — server-rendered shell, populated by
   completion_candidates.js on page load. Hidden until the GET returns
   at least one candidate, so users with zero candidates see no
   visual clutter. Gated server-side on both feature flag AND allow_run
   per docs/specs/ops-specs-completion-candidates/ (Phase 2). #}
{% if allow_run and specs_candidates_enabled %}
<section id="completion-candidates" class="candidates-section" hidden aria-label="Specs that look complete">
  <header class="candidates-head">
    <h2>Ready to close? <span class="candidates-count" id="cc-count">0</span></h2>
    <p class="candidates-sub">
      Specs where all signals indicate the work is done. Confirm to
      flip status to <code>complete</code>, or dismiss for 14 days
      (re-surfaces immediately if new signal lands).
    </p>
  </header>
  <ul class="candidates-list" id="cc-list" role="list"></ul>
</section>
{% endif %}

{% if specs %}
  {# A3a toolbar — chip filter row, search, sort. JS in specs_refined.js
     handles state; default chip state is all-on EXCEPT Complete per
     decisions.md D1 + R1.3. URL param persistence ships in A3c. #}
  <div class="specs-toolbar" role="region" aria-label="Spec filter and sort controls">
    <div class="chip-row" role="group" aria-label="Lifecycle bucket filters">
      <span class="chip-label">Filter:</span>
      {% set bucket_styles = [
        ('active', 'Active', ''),
        ('approved-not-shipped', 'Approved-not-shipped', 'bucket-approved-not-shipped'),
        ('complete', 'Complete', 'bucket-complete'),
        ('paused', 'Paused', 'bucket-paused'),
        ('stale', 'Stale', 'bucket-stale'),
        ('draft', 'Draft', 'bucket-draft'),
      ] %}
      {% for bucket, label, color_cls in bucket_styles %}
        {# A3c — chip active state honors `?bucket=` URL param when
           present, else falls back to defaults (all on except Complete).
           initial_buckets is always a list — pre-parsed in
           dashboard.py via _parse_specs_url_state. #}
        {% set active = bucket in initial_buckets %}
        {# bucket-* class always present so chips colorize correctly
           after JS toggles chip-active on/off. CSS gates the color
           on `.chip-active.bucket-*` — inactive chips show neutral. #}
        <button
          type="button"
          class="chip {% if color_cls %}{{ color_cls }} {% endif %}{% if active %}chip-active{% else %}chip-inactive{% endif %}"
          data-bucket="{{ bucket }}"
          aria-pressed="{{ 'true' if active else 'false' }}"
          aria-label="{{ label }} bucket — {{ bucket_counts[bucket] }} specs"
        >{{ label }} <span class="chip-count" data-count="{{ bucket }}">{{ bucket_counts[bucket] }}</span>{% if not active %} <span class="chip-hidden-mark" aria-hidden="true">✗</span>{% endif %}</button>
      {% endfor %}
    </div>
    <div class="search-wrap">
      <label class="search-label" for="specs-search">Search:</label>
      {# A3c — initial_query from ?q= URL param (empty by default). #}
      <input id="specs-search" class="search-input" type="search"
        placeholder="slug substring…" autocomplete="off"
        value="{{ initial_query }}"
        aria-label="Filter specs by slug substring" />
    </div>
    <div class="sort-wrap">
      <label class="sort-label" for="specs-sort">Sort:</label>
      {# A3c — initial_sort from ?sort= URL param (default "recent"). #}
      <select id="specs-sort" class="sort-select" aria-label="Sort specs">
        <option value="recent"{% if initial_sort == 'recent' %} selected{% endif %}>Recently updated</option>
        <option value="alpha"{% if initial_sort == 'alpha' %} selected{% endif %}>Alphabetical</option>
        <option value="oldest"{% if initial_sort == 'oldest' %} selected{% endif %}>Oldest untouched</option>
      </select>
    </div>
  </div>

  {# Compact status display: dot + 3-letter code for known statuses,
     truncated text + dotted underline for custom strings. Full status
     in title attribute (native tooltip). Click on editable pills swaps
     to <select> via specs.js. #}
  {% macro status_code(st) -%}
    {%- set s = (st or '')|lower|trim -%}
    {%- if s == 'draft' -%}drf
    {%- elif s in ('in-review', 'review') -%}rvw
    {%- elif s == 'approved' -%}apv
    {%- elif s in ('complete', 'completed', 'done') -%}cpl
    {%- elif s|length > 8 -%}{{ s[:8] }}…
    {%- else -%}{{ s }}
    {%- endif -%}
  {%- endmacro %}
  {% macro chip_cls(st) -%}
    {%- set s = (st or '')|lower|trim -%}
    {%- if s in ('approved', 'complete', 'completed', 'done') -%}chip-ok
    {%- elif s in ('in-review', 'review') -%}chip-warn
    {%- elif s == 'draft' -%}chip-muted
    {%- else -%}chip-custom
    {%- endif -%}
  {%- endmacro %}
  {% macro is_custom(st) -%}
    {%- set s = (st or '')|lower|trim -%}
    {%- if s and s not in ('draft', 'in-review', 'review', 'approved', 'complete', 'completed', 'done') -%}1
    {%- else -%}0
    {%- endif -%}
  {%- endmacro %}
  <table class="data-table specs-table">
    <thead>
      <tr>
        <th class="col-slug">Spec</th>
        <th class="col-mtime">Updated</th>
        <th class="col-phases" data-tooltip="Decisions / Requirements / Design / Tasks">Phases <span class="phase-axis">D&middot;R&middot;D&middot;T</span></th>
        <th class="col-lifecycle">Lifecycle</th>
        <th class="col-kebab" aria-label="Row actions"></th>
      </tr>
    </thead>
    <tbody>
      {% for s in specs %}
        <tr data-slug="{{ s.slug }}" data-bucket="{{ s.lifecycle }}" data-mtime="{{ s.last_modified or '' }}" data-spec-path="{{ s.path }}">
          <td class="col-slug">
            <a href="/specs/{{ s.slug }}" class="link spec-slug" data-tooltip="{{ s.slug }}" aria-label="{{ s.slug }}"><code>{{ s.slug }}</code></a>
          </td>
          <td class="col-mtime">
            {% if s.last_modified %}
              {# <time> element + datetime attr: assistive tools can recognise
                 this as a timestamp; screen readers that support the time role
                 announce it as a date/time. specs.js syncs aria-label to the
                 visible relative-time on render so screen readers hear the
                 friendly "Updated 2h ago" instead of the raw ISO string. #}
              <time class="spec-mtime" datetime="{{ s.last_modified }}" data-mtime="{{ s.last_modified }}" data-tooltip="{{ s.last_modified }}" aria-label="Updated {{ s.last_modified }}">—</time>
            {% else %}
              {# aria-label replaces the visible em-dash for screen readers
                 so the cell is announced as meaningful text, not punctuation. #}
              <span class="spec-mtime spec-mtime-empty" aria-label="No update time recorded">—</span>
            {% endif %}
          </td>
          <td class="col-phases">
            <span class="phase-pills" role="group" aria-label="Phase statuses for {{ s.slug }}">
              {% for phase in s.phases %}
                {% if not phase.exists %}
                  <span class="status-pill chip-muted" data-phase="{{ phase.name }}" data-tooltip="No {{ phase.name }}.md file" aria-label="No {{ phase.name }}.md file">—</span>
                {% else %}
                  {% set cls = chip_cls(phase.status)|trim %}
                  {% set code = status_code(phase.status)|trim %}
                  {% set custom = is_custom(phase.status)|trim == '1' %}
                  <span
                    class="status-pill {{ cls }}{% if custom %} status-pill-custom{% endif %}{% if allow_run %} status-pill-editable{% endif %}"
                    data-phase="{{ phase.name }}"
                    data-tooltip="{{ phase.name|capitalize }}: {{ phase.status or '(no status)' }}"
                    {% if allow_run %}
                    data-slug="{{ s.slug }}"
                    data-original="{{ phase.status or '' }}"
                    role="button"
                    tabindex="0"
                    aria-label="Status for {{ phase.name }} of {{ s.slug }}: {{ phase.status or 'no status' }}. Click to edit."
                    {% else %}
                    aria-label="Status for {{ phase.name }} of {{ s.slug }}: {{ phase.status or 'no status' }}"
                    {% endif %}
                  ><span class="status-dot" aria-hidden="true"></span><span class="status-code">{{ code or '(none)' }}</span></span>
                {% endif %}
              {% endfor %}
            </span>
          </td>
          <td class="col-lifecycle">
            <span class="lifecycle-badge lifecycle-{{ s.lifecycle }}" data-tooltip="Derived from phase statuses + last-modified date">
              {{ s.lifecycle.replace('-', ' ') }}
            </span>
          </td>
          <td class="col-kebab">
            {# A3b kebab — 3 actions (Open in editor / Copy slug / View
               linked PRs). Menu opens absolutely positioned via JS;
               closes on outside click, Escape, or item select. #}
            <button
              type="button"
              class="kebab-btn"
              data-kebab="{{ s.slug }}"
              aria-label="Actions for {{ s.slug }}"
              aria-haspopup="menu"
              aria-expanded="false"
            >⋯</button>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  <div id="specs-empty-state" class="specs-empty-state" hidden role="status" aria-live="polite">
    <div class="empty-state-title" id="specs-empty-title">No matches</div>
    <div class="empty-state-hint" id="specs-empty-hint"></div>
    <button type="button" class="empty-state-action" id="specs-reset-filters">Reset to default filters</button>
  </div>

  {# A3b — kebab-menu toast for action feedback (Copy slug succeeded,
     etc.). `aria-live="polite"` so screen readers announce the result
     without interrupting the user. JS toggles `.toast-visible`. #}
  <div id="specs-toast" class="specs-toast" role="status" aria-live="polite"></div>

  {# A3b config — github_repo for the View linked PRs URL. None when
     the project isn't a GitHub-hosted git repo; JS renders that
     action as disabled. #}
  <script id="specs-config" type="application/json">
    {"github_repo": {{ (github_repo or '')|tojson }}}
  </script>
{% else %}
  <p class="empty">
    No specs found. Configure a roots directory with
    <code>attune ops --specs-root &lt;dir&gt;</code>, or place spec
    folders under <code>docs/specs/</code>.
  </p>
{% endif %}
{% endblock %}

{% block scripts %}
  {# A3a: chip filter / search / sort behavior. Loaded for all users
     (read-only and editable) since filtering is a navigation aid, not
     a mutation. URL persistence + chip-state-from-URL ships in A3c. #}
  {% if specs %}
    <script src="{{ url_for('static', path='js/specs_refined.js') }}?v={{ attune_version }}"></script>
    {# A3b — kebab menu + 3 actions. Loaded for all users (read-only
       and editable) since none of the 3 actions mutate spec state. #}
    <script src="{{ url_for('static', path='js/specs_kebab.js') }}?v={{ attune_version }}"></script>
  {% endif %}
  {% if allow_run %}
    {# Pre-A3 status-flip behavior — still loaded so per-phase pill
       clicks open the inline editor. A future PR can fold its logic
       into specs_refined.js if the surfaces converge. #}
    <script src="{{ url_for('static', path='js/specs.js') }}?v={{ attune_version }}"></script>
    {% if specs_candidates_enabled %}
      <script src="{{ url_for('static', path='js/completion_candidates.js') }}?v={{ attune_version }}"></script>
    {% endif %}
  {% endif %}
{% endblock %}