{% from '_partials/badge.html' import badge %}
<div class="page-header">
    <h1>{{ page_title }}</h1>
    <p>{{ decisions|length }} architectural and operational decisions with rationale and traceability.</p>
</div>

{% if decisions %}
<style>
    /* T-2045: bound rendered height — the decisions table grows unbounded as decisions
       accumulate (13k px at 198 rows). Same table class as T-2044 /learnings & T-2039
       /fabric: a max-height scroll container with sticky header keeps every row in the
       DOM, reached by internal scroll. (<details> can't legally wrap <tr>.) */
    .decisions-table-scroll {
        max-height: calc(100vh - 220px);
        min-height: 240px;
        overflow-y: auto;
        border: 1px solid var(--pico-muted-border-color);
        border-radius: var(--pico-border-radius);
    }
    .decisions-table-scroll table { margin-bottom: 0; }
    .decisions-table-scroll thead th {
        position: sticky;
        top: 0;
        background: var(--pico-card-background-color);
        z-index: 2;
    }
    /* T-2045 review feedback: keep the ID (e.g. AD-001) on one line — the narrow
       first column was breaking it at the hyphen into two rows. */
    .decisions-table-scroll tbody td:first-child { white-space: nowrap; }
</style>
<div class="decisions-table-scroll">
<table role="grid">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Type</th>
            <th scope="col">Decision</th>
            <th scope="col">Directives</th>
            <th scope="col">Task</th>
            <th scope="col">Date</th>
        </tr>
    </thead>
    <tbody>
        {% for d in decisions %}
        <tr>
            <td><code>{{ d.id }}</code></td>
            <td>{{ badge('arch' if d.type == 'architectural' else 'ops') }}</td>
            <td>{{ d.decision }}</td>
            <td><small>{{ d.directives_served }}</small></td>
            <td>{% if d.task %}<code>{{ d.task }}</code>{% endif %}</td>
            <td><small>{{ d.date }}</small></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div><!-- /decisions-table-scroll (T-2045) -->

{% if rationale_map %}
<details class="mt-3">
    <summary>Decision Rationale Details</summary>
    {% for d in decisions %}
    {% if d.rationale %}
    <article style="padding: 0.75rem 1rem; margin-bottom: 0.5rem;">
        <strong>{{ d.id }}</strong> &mdash; {{ d.decision }}
        <p style="margin: 0.5rem 0 0; color: var(--pico-muted-color); font-size: 0.875rem;">{{ d.rationale }}</p>
        {% if d.alternatives %}
        <p style="margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--pico-muted-color);">
            Rejected: {{ d.alternatives | join(', ') }}
        </p>
        {% endif %}
    </article>
    {% endif %}
    {% endfor %}
</details>
{% endif %}

{% else %}
<div class="coming-soon">
    <h3>No Decisions Found</h3>
    <p>No decisions were found in <code>.context/project/decisions.yaml</code> or <code>005-DesignDirectives.md</code>.</p>
</div>
{% endif %}