{% from '_partials/badge.html' import badge %}
<div class="page-header">
    <h1>{{ page_title }}</h1>
    <p>{{ gaps|length }} specification-reality gaps with decision triggers and evidence tracking.</p>
</div>

{% if gaps %}
{# T-2043: bound rendered height — order active (non-closed) gaps first so they're always
   inline, then render the first _gaps_cap and wrap the overflow (mostly closed/resolved)
   in a collapsed <details> (display:none → excluded from scrollHeight and full_page
   screenshots, every gap still in the DOM one click away). Same card-list class as T-2040. #}
{% set _gaps_ordered = (gaps|rejectattr('status','equalto','closed')|list) + (gaps|selectattr('status','equalto','closed')|list) %}
{% set _gaps_cap = 20 %}
{% for g in _gaps_ordered %}
{% if loop.index == _gaps_cap + 1 %}
<details class="gaps-overflow" style="margin:0.75rem 0;">
<summary style="cursor:pointer; font-weight:600; padding:0.5rem 0.6rem; color:var(--wt-accent); border:1px dashed var(--pico-muted-border-color); border-radius:6px;">Show {{ _gaps_ordered|length - _gaps_cap }} more gap{{ 's' if (_gaps_ordered|length - _gaps_cap) != 1 }} — mostly closed / resolved</summary>
{% endif %}
<article>
    <header>
        <div class="flex-between">
            <span>
                <code>{{ g.id }}</code> &mdash; {{ g.title }}
            </span>
            <span>
                {{ badge(g.severity | default('unknown')) }}
                {% set _status_map = {'watching': 'watching', 'decided-build': 'build', 'decided-simplify': 'simplify', 'closed': 'closed'} %}
                {{ badge(_status_map.get(g.status, g.status | default('unknown'))) }}
            </span>
        </div>
    </header>

    <p>{{ g.description }}</p>

    {% if g.spec_reference %}
    <p class="text-base"><strong>Spec:</strong> <code>{{ g.spec_reference }}</code></p>
    {% endif %}

    {% if g.why_not_now %}
    <details>
        <summary>Why not now?</summary>
        <p class="text-muted">{{ g.why_not_now }}</p>
    </details>
    {% endif %}

    {% if g.decision_trigger %}
    <details>
        <summary>Decision trigger</summary>
        <p>{{ g.decision_trigger }}</p>
        {% if g.trigger_check %}
        <p class="text-sm text-muted">
            Check type: <code>{{ g.trigger_check.type }}</code>
            {% if g.trigger_check.hint %} &mdash; {{ g.trigger_check.hint }}{% endif %}
            {% if g.trigger_check.check %}<br>Command: <code>{{ g.trigger_check.check }}</code>{% endif %}
            {% if g.trigger_check.threshold %}<br>Threshold: {{ g.trigger_check.threshold }}{% endif %}
        </p>
        {% endif %}
    </details>
    {% endif %}

    {% if g.evidence_needed or g.evidence_collected %}
    <details>
        <summary>Evidence</summary>
        {% if g.evidence_needed %}
        <p><strong>Needed:</strong> {{ g.evidence_needed }}</p>
        {% endif %}
        {% if g.evidence_collected %}
        <p><strong>Collected:</strong> {{ g.evidence_collected }}</p>
        {% endif %}
    </details>
    {% endif %}

    {% if g.alternative_outcome %}
    <details>
        <summary>Alternative outcome</summary>
        <p class="text-muted">{{ g.alternative_outcome }}</p>
    </details>
    {% endif %}

    {# T-2185: Close action — surfaces when gap has a closure_check_command and gauge=READY.
       Disabled tooltip when gauge=NOT_READY/UNKNOWN; absent when no command configured.
       Inline result via HTMX swap. #}
    {% set _gs = gauge_by_id.get(g.id) %}
    {% if g.status == 'watching' and _gs and _gs.has_gauge %}
    <div class="gap-close-action" data-gap-id="{{ g.id }}" style="margin-top: 0.5rem;">
        {% if _gs.verdict == 'READY' %}
        <form hx-post="/gaps/{{ g.id }}/close"
              hx-target="closest .gap-close-action"
              hx-swap="innerHTML"
              hx-confirm="Close {{ g.id }}? Gauge verdict={{ _gs.verdict }}."
              style="display:inline;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="contrast" style="padding:0.25rem 0.75rem; font-size:0.85rem;">
                Close ({{ _gs.verdict }})
            </button>
        </form>
        {% else %}
        <button type="button" disabled
                title="Gauge verdict={{ _gs.verdict }} — closure refused until READY"
                style="padding:0.25rem 0.75rem; font-size:0.85rem; opacity:0.6; cursor:not-allowed;">
            Close ({{ _gs.verdict }})
        </button>
        {% endif %}
    </div>
    {% endif %}

    <footer style="text-align: left; border-top: 1px solid var(--pico-muted-border-color); padding-top: 0.5rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--pico-muted-color);">
        {% if g.related_directives %}Directives: {{ g.related_directives | join(', ') }} | {% endif %}
        Created: {{ g.created | default('unknown') }}
        {% if g.last_reviewed %} | Last reviewed: {{ g.last_reviewed }}{% endif %}
    </footer>
</article>
{% endfor %}
{% if _gaps_ordered|length > _gaps_cap %}</details><!-- /gaps-overflow (T-2043) -->{% endif %}
{% else %}
<div class="coming-soon">
    <h3>No Gaps Found</h3>
    <p>No gaps were found in <code>.context/project/gaps.yaml</code>.</p>
</div>
{% endif %}