{% extends "base.html" %}
{% block title %}Specs{% endblock %}
{% block content %}
<section class="page-head">
  <h1>Specs</h1>
  <p class="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 %}
  {# 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>
        {% for phase_name in ("decisions", "requirements", "design", "tasks") %}
          <th class="col-phase">{{ phase_name|capitalize }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for s in specs %}
        <tr data-slug="{{ s.slug }}">
          <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>
          {% for phase in s.phases %}
            <td class="col-phase" data-phase="{{ phase.name }}">
              {% if not phase.exists %}
                <span class="status-pill chip-muted" 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-tooltip="{{ phase.status or '(no status)' }}"
                  {% if allow_run %}
                  data-slug="{{ s.slug }}"
                  data-phase="{{ phase.name }}"
                  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 %}
            </td>
          {% endfor %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% 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 %}
{% if allow_run %}
  <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 %}