{# src/examen/templates/_heatmap.html #}
{# Required context: heatmap = {very_sure: [[topic,...],...], somewhat: [...], unsure: [...]}
   each row is a 5-element list of topic-lists.
   Each topic dict: {id, label, score, calibration, abbr} #}
<section class="heatmap" aria-label="Knowledge × calibration heatmap">
  <h2>Knowledge × calibration</h2>
  <div class="heatmap__grid">
    {% for band_label, band_key in [("very sure", "very_sure"), ("somewhat", "somewhat"), ("unsure", "unsure")] %}
      <div class="heatmap__ylabel">{{ band_label }}</div>
      {% for cell in heatmap[band_key] %}
        <div class="heatmap__cell{% if cell %} heatmap__cell--has{% endif %}">
          {% for t in cell %}
            {%- set is_warn = (band_key == 'very_sure') and (t.score < 0.4) -%}
            <a class="heatmap__topic{% if is_warn %} heatmap__topic--warn{% endif %} heatmap__topic--tier-{{ 3 if t.score >= 0.66 else (2 if t.score >= 0.33 else 1) }}"
               href="#topic-{{ t.id }}"
               title="{{ t.label }} · score {{ '%.2f'|format(t.score) }} · cal {{ '%+.2f'|format(t.calibration) }}"
               data-warn="{{ 'true' if is_warn else 'false' }}">{{ t.abbr }}</a>
          {% endfor %}
          {% if not cell %}<span class="heatmap__empty" aria-hidden="true">·</span>{% endif %}
        </div>
      {% endfor %}
    {% endfor %}
  </div>
  <div class="heatmap__xaxis">
    <span></span><span>wrong</span><span></span><span></span><span></span><span>right</span>
  </div>
  <p class="heatmap__legend">
    Top-right is good. Bottom-left is calibrated honesty.
    <span class="heatmap__warn-tag">Top-left is dangerous</span> — confident and wrong.
  </p>
</section>