{# Heatmap region — UX-035 adopter #13.
   Contract: ~/.claude/skills/ux-architect/components/heatmap-region.md (UX-064)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-heatmap-* classes.
   Threshold-banded cell tints route through data-dz-heatmap-tone
   (bad / warn / good) attribute selectors so the template emits a
   single data-attribute instead of three Tailwind class strings. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
<div class="dz-heatmap-region">
  {% if heatmap_matrix %}
  <div class="dz-heatmap-scroll">
    <table class="dz-heatmap-grid">
      <thead>
        <tr>
          <th></th>
          {% for col in heatmap_col_values %}
          <th>{{ col }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in heatmap_matrix %}
        {# action_url is row-scoped — attached to the <tr> so clicking the
           row label (leftmost <td>) navigates too (#845). Per-cell hover
           feedback stays for the threshold-colour cells below. #}
        <tr {% if action_url %}class="is-clickable"
            hx-get="{{ action_url | replace('{id}', row.row_id) }}" hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
          <td class="dz-heatmap-row-label">{{ row.row }}</td>
          {% for cell in row.cells %}
          <td class="dz-heatmap-cell"
              {%- if heatmap_thresholds|length >= 2 -%}
                {%- if cell.value < heatmap_thresholds[0] %} data-dz-heatmap-tone="bad"
                {%- elif cell.value < heatmap_thresholds[1] %} data-dz-heatmap-tone="warn"
                {%- else %} data-dz-heatmap-tone="good"
                {%- endif -%}
              {%- elif heatmap_thresholds|length == 1 -%}
                {%- if cell.value < heatmap_thresholds[0] %} data-dz-heatmap-tone="bad"
                {%- else %} data-dz-heatmap-tone="good"
                {%- endif -%}
              {%- endif %}>
            {{ "%.1f"|format(cell.value) }}
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if total > items|length %}
  <p class="dz-heatmap-overflow">Showing {{ items|length }} of {{ total }}</p>
  {% endif %}
  {% else %}
  <p class="dz-empty-dense" role="status">{{ empty_message | default("No data available.") }}</p>
  {% endif %}
</div>
{% endcall %}