{% extends "base.html" %}
{% from "macros.html" import team_filter, team_name %}
{% block title %}Heatmap · {{ hm.round.label }} · Competence{% endblock %}
{% block crumbs %}<a class="crumb" href="/round/{{ hm.round.id }}">{{ hm.round.label }}</a><span class="crumb">Heatmap</span>{% endblock %}
{% block content %}
<h1>Heatmap <span class="muted">· {% if team %}{{ team_name(teams, team) }} · {% endif %}{{ hm.round.label }} · {{ metrics[metric] }}</span></h1>
{{ team_filter(teams, team, link) }}

<nav class="filter" aria-label="Metric">
  {% for key, label in metrics.items() %}
  <a href="{{ link(metric=key) }}"{% if key == metric %} aria-current="true"{% endif %}>{{ label }}</a>
  {% endfor %}
</nav>
<nav class="filter" aria-label="Tag filter">
  {% if tags|length > 1 %}<a href="{{ link(tag=None) }}"{% if not tag %} aria-current="true"{% endif %}>All</a>
  {% for t in tags %}<a href="{{ link(tag=t) }}"{% if tag == t %} aria-current="true"{% endif %}>{{ t }}</a>{% endfor %}{% endif %}
  <span class="muted">{{ hm.rows|length }} skills</span>
</nav>

<p class="legend muted">
  {% if metric == "gap" %}
  <span class="cell g-far">≤ −3</span> <span class="cell g-below">below</span> <span class="cell g-ok">at target</span>
  <span class="cell g-above">above</span> — level used minus the target for the person's role this round.
  {% elif metric == "competency" %}
  <span class="cell h0">0</span> <span class="cell h1">1–3</span> <span class="cell h2">4–8</span>
  <span class="cell h3">9–15</span> <span class="cell h4">16–24</span> — level used × desire (0–24); high = skilled and motivated.
  {% elif metric == "desire" %}
  <span class="cell h0">1</span> <span class="cell h2">2</span> <span class="cell h4">3</span>
  — 1 not interested, 2 happy to do it, 3 passionate.
  {% else %}
  <span class="cell h0">0</span> <span class="cell h1">1–2</span> <span class="cell h2">3</span>
  <span class="cell h3">5</span> <span class="cell h4">8</span>
  {% endif %}
  Blank = not rated. Click a cell to open that rating.
</p>

{% if not hm.columns %}
<p>Nobody has been assessed in this round yet. <a href="/round/{{ hm.round.id }}">Start assessments</a>.</p>
{% else %}
<div class="table-wrap heat-wrap">
<table class="heatmap">
  <thead><tr>
    <th class="skill-col">Skill</th>
    {% for a in hm.columns %}<th scope="col"><a href="/round/{{ hm.round.id }}/person/{{ a.person.id }}/profile">{{ a.person.name }}</a><small>{{ a.role.name }}</small></th>{% endfor %}
  </tr></thead>
  {% for category, rows in groups %}
  <tbody>
    <tr class="cat-row"><th colspan="{{ hm.columns|length + 1 }}" scope="rowgroup">{{ category }}</th></tr>
    {% for r in rows %}
    <tr>
      <th scope="row" class="skill-col">{{ r.name }} {{ r.tag|tag_badge }}</th>
      {% for a in hm.columns %}{% set c = r.cells[loop.index0] %}{% set v = read(c) %}
      <td class="cell {{ heat_class(metric, v) }}"><a href="/round/{{ hm.round.id }}/person/{{ a.person.id }}#skill-{{ r.skill_id }}" title="{{ a.person.name }} · {{ r.name }}: level {{ c.used|num }}, desire {{ c.desire|num }}, target {{ c.target|num }}">
        {%- if v is none %}&nbsp;{% elif metric == "gap" and v > 0 %}+{{ v }}{% else %}{{ v }}{% endif -%}
      </a></td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
  {% endfor %}
</table>
</div>
{% endif %}
{% endblock %}