{% from '_partials/badge.html' import badge %}
<style>
    .risk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
    @media (max-width: 768px) { .risk-stats { grid-template-columns: repeat(2, 1fr); } }
    .risk-stat { text-align: center; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 1rem; }
    .risk-stat .num { font-size: 2rem; font-weight: 700; margin: 0; }
    .risk-stat .label { font-size: 0.8rem; color: var(--pico-muted-color); margin: 0; }

    .ranking-bar { display: flex; gap: 0; border-radius: 6px; overflow: hidden; height: 1.5rem; margin-bottom: 2rem; }
    .ranking-bar .segment { display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: white; min-width: 2rem; }
    .ranking-bar .seg-urgent { background-color: #c0392b; }
    .ranking-bar .seg-high { background-color: #e67e22; }
    .ranking-bar .seg-medium { background-color: #f1c40f; color: #2d3436; }
    .ranking-bar .seg-low { background-color: #27ae60; }

    .heatmap { border-collapse: collapse; width: 100%; max-width: 500px; margin: 0 auto 2rem; }
    .heatmap th, .heatmap td { text-align: center; padding: 0.4rem; font-size: 0.8rem; border: 1px solid var(--pico-muted-border-color); }
    .heatmap th { font-weight: 600; background: var(--pico-card-background-color); }
    .heatmap .axis-label { font-weight: 600; background: var(--pico-card-background-color); }
    .heatmap .cell { min-width: 3rem; min-height: 2.5rem; position: relative; }
    .heatmap .cell-urgent { background-color: rgba(192, 57, 43, 0.25); }
    .heatmap .cell-high { background-color: rgba(230, 126, 34, 0.2); }
    .heatmap .cell-medium { background-color: rgba(241, 196, 15, 0.15); }
    .heatmap .cell-low { background-color: rgba(39, 174, 96, 0.1); }
    .heatmap .cell-count { font-weight: 700; font-size: 1.1rem; }

    /* badge styles replaced by badge macro (T-421) */

    .risk-table { font-size: 0.85rem; }
    .risk-table td, .risk-table th { padding: 0.4rem 0.6rem; }
    .risk-table .score-cell { font-weight: 700; text-align: center; }

    .register-card { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 1rem; text-align: center; }
    .register-card .rname { font-weight: 600; }
    .register-card .rdesc { font-size: 0.8rem; color: var(--pico-muted-color); }
</style>

<div class="page-header">
    <h1>{{ page_title }}</h1>
    <p>Unified concerns register &mdash; gaps (what IS wrong) and risks (what COULD go wrong) in one view. Consolidated from three-register model (T-397).</p>
</div>

<!-- About This Page -->
<details style="margin-bottom: 2rem;">
    <summary style="font-weight: 600;">About this page</summary>
    <div style="font-size: 0.875rem; padding-top: 0.5rem;">
        <p><strong>Types:</strong>
            {{ badge('gap') }} = spec-reality divergence (present tense),
            {{ badge('risk') }} = forward-looking concern (future tense).</p>
        <p><strong>Risk scoring:</strong> Likelihood (1-5) &times; Impact (1-5) = Score (1-25).<br>
        Ranking: {{ badge('low') }} 1-4, {{ badge('medium') }} 5-9, {{ badge('high') }} 10-16, {{ badge('urgent') }} 17-25.</p>
        <p><strong>Data source:</strong> <code>.context/project/concerns.yaml</code></p>
    </div>
</details>

<!-- Overview Cards -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem;">
    <div class="register-card">
        <div class="rname">Watching</div>
        <div class="text-xl font-bold">{{ total_watching }}</div>
        <div class="rdesc">Active concerns being monitored</div>
    </div>
    <div class="register-card">
        <div class="rname">Closed</div>
        <div style="font-size: 1.5rem; font-weight: 700; color: #27ae60;">{{ total_closed }}</div>
        <div class="rdesc">Resolved &middot; {{ total_gaps }} gaps + {{ total_risks }} risks</div>
    </div>
    <div class="register-card">
        <div class="rname">Controls</div>
        <div class="text-xl font-bold">{{ total_controls }}</div>
        <div class="rdesc">{{ controls_active }} active &middot; {{ controls_blocking }} blocking</div>
    </div>
</div>

<!-- Watching Concerns -->
<h2>Watching ({{ watching | length }})</h2>
{% if watching %}
{% for c in watching %}
<article style="border-left: 4px solid {% if c.type == 'risk' %}#e67e22{% else %}#3498db{% endif %};">
    <header class="flex-between">
        <span><code>{{ c.id }}</code> &mdash; {{ c.title }}</span>
        <span>
            {{ badge(c.type | default('gap')) }}
            {{ badge(c.severity | default('low')) }}
        </span>
    </header>
    <p>{{ c.description }}</p>
    {% if c.type == 'risk' and c.score %}
    <p class="text-base"><strong>Score:</strong> {{ c.likelihood }} &times; {{ c.impact }} = {{ c.score }}
        {% if c.controls %} | <strong>Controls:</strong> {{ c.controls | join(', ') }}{% endif %}
    </p>
    {% endif %}
    {% if c.residual_notes %}
    <p style="font-size: 0.875rem; color: var(--pico-muted-color);"><strong>Residual:</strong> {{ c.residual_notes }}</p>
    {% endif %}
    {% if c.decision_trigger %}
    <p class="text-base"><strong>Trigger:</strong> {{ c.decision_trigger }}</p>
    {% endif %}
</article>
{% endfor %}
{% else %}
<p class="text-muted italic">No concerns being watched.</p>
{% endif %}

<!-- Risk Heatmap (if any risk-type entries) -->
{% if risks %}
<h3>Risk Heatmap (Likelihood &times; Impact)</h3>
<table class="heatmap" role="grid">
    <thead>
        <tr>
            <th></th>
            <th>1 Negligible</th>
            <th>2 Minor</th>
            <th>3 Moderate</th>
            <th>4 Major</th>
            <th>5 Severe</th>
        </tr>
    </thead>
    <tbody>
        {% for l in [5, 4, 3, 2, 1] %}
        <tr>
            <td class="axis-label">{{ l }}{% if l == 5 %} Certain{% elif l == 4 %} Likely{% elif l == 3 %} Possible{% elif l == 2 %} Unlikely{% else %} Rare{% endif %}</td>
            {% for i in [1, 2, 3, 4, 5] %}
            {% set score = l * i %}
            {% set cell_class = 'cell-urgent' if score >= 17 else ('cell-high' if score >= 10 else ('cell-medium' if score >= 5 else 'cell-low')) %}
            {% set count = [] %}
            {% for r in risks %}
                {% if r.get('likelihood', 0) == l and r.get('impact', 0) == i %}
                    {% if count.append(1) %}{% endif %}
                {% endif %}
            {% endfor %}
            <td class="cell {{ cell_class }}">
                {% if count | length > 0 %}
                <span class="cell-count">{{ count | length }}</span>
                {% endif %}
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}

<!-- Controls Section -->
{% if controls %}
<h2>Controls ({{ total_controls }})</h2>
<p style="font-size: 0.875rem; color: var(--pico-muted-color);">
    Enforcement mechanisms. See <a href="/enforcement" hx-get="/enforcement" hx-target="#content" hx-push-url="true">Enforcement page</a> for hook status.
</p>

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; margin-bottom: 1.5rem;">
    {% for ctype, count in control_by_type | dictsort %}
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.75rem; border: 1px solid var(--pico-muted-border-color); border-radius: 6px; font-size: 0.8rem;">
        <span>{{ ctype | replace('_', ' ') | capitalize }}</span>
        <span style="font-weight: 700;">{{ count }}</span>
    </div>
    {% endfor %}
</div>

<div style="overflow-x: auto;">
<table class="risk-table" role="grid">
    <thead>
        <tr>
            <th>ID</th>
            <th>Control</th>
            <th>Type</th>
            <th>Blocking</th>
            <th>Mitigates</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
    {% for c in controls %}
        <tr>
            <td><code>{{ c.id }}</code></td>
            <td>{{ c.name }}</td>
            <td><small>{{ c.type | replace('_', ' ') }}</small></td>
            <td style="text-align: center;">
                {% if c.blocking %}{{ badge('gate', '#e67e22') }}
                {% else %}{{ badge('warn', '#6c757d') }}
                {% endif %}
            </td>
            <td><small>{{ c.mitigates | join(', ') if c.mitigates else 'None' }}</small></td>
            <td>
                {{ badge(c.status | default('active')) }}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</div>
{% endif %}

<!-- Closed Concerns (collapsible) -->
<details class="mt-3">
    <summary>Closed Concerns ({{ closed | length }})</summary>
    <div style="overflow-x: auto;">
    <table class="risk-table" role="grid">
        <thead>
            <tr>
                <th>ID</th>
                <th>Type</th>
                <th>Concern</th>
                <th>Severity</th>
                <th>Resolution</th>
            </tr>
        </thead>
        <tbody>
        {% for c in closed %}
            <tr>
                <td><code>{{ c.id }}</code></td>
                <td>{{ badge(c.type | default('gap')) }}</td>
                <td>{{ c.title }}</td>
                <td>{{ badge(c.severity | default('low')) }}</td>
                <td><small class="text-muted">{{ c.resolution | default('See task') | truncate(100) }}</small></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
</details>