{# Per-category AP leaderboard — rendered by dashboard.chart_per_category_ap(). #}
{% if not rows %}
<p class="empty-state">No per-class data available.</p>
{% else %}
<div class="cat-mean">
    <span class="cat-mean-label">Mean AP</span>
    <span class="cat-mean-value">{{ "%.3f" | format(mean_ap) }}</span>
</div>
<div class="cat-ap-list" id="cat-ap-list">
    {%- for row in rows %}
    <a class="cat-row{% if row.hidden %} hidden{% endif %}" href="/?categories={{ row.name | urlencode }}" data-rank="{{ row.rank }}">
        <span class="cat-rank">{{ row.rank }}</span>
        <span class="cat-name">{{ row.name }}</span>
        <span class="cat-bar-wrap">
            <span class="cat-bar {{ 'above' if row.above_mean else 'below' }}" style="width:{{ '%.1f' | format(row.pct) }}%"></span>
        </span>
        <span class="cat-ap">{{ "%.3f" | format(row.ap) }}</span>
    </a>
    {%- endfor %}
</div>
{% if total > collapsed_n %}
<button class="cat-toggle" id="cat-ap-toggle" onclick="toggleCatAP()">
    <span class="cat-toggle-text">Show all {{ total }} categories</span>
    <span class="cat-toggle-icon">&#9662;</span>
</button>
<script>
function toggleCatAP() {
    var rows = document.querySelectorAll(".cat-row.hidden");
    var btn = document.getElementById("cat-ap-toggle");
    var txt = btn.querySelector(".cat-toggle-text");
    var icon = btn.querySelector(".cat-toggle-icon");
    if (rows.length > 0) {
        document.querySelectorAll(".cat-row").forEach(function (r) { r.classList.remove("hidden"); });
        txt.textContent = "Show top {{ collapsed_n }}";
        icon.textContent = "▴";
    } else {
        document.querySelectorAll(".cat-row").forEach(function (r, i) {
            if (i >= {{ collapsed_n }}) r.classList.add("hidden");
        });
        txt.textContent = "Show all {{ total }} categories";
        icon.textContent = "▾";
        document.getElementById("cat-ap-list").scrollIntoView({ behavior: "smooth", block: "start" });
    }
}
</script>
{% endif %}
{% endif %}