{# Mapa de calor de actividad estilo GitHub. Espera la variable `calendar` = { cols, max }. #}
{% set shades = ['#ebedf0', '#b3d0db', '#6fa8bf', '#2d7d9a', '#005877'] %}
<div style="display:flex;gap:6px;align-items:stretch;">
  <div style="display:grid;grid-template-rows:repeat(7,13px);gap:3px;font-size:9px;color:#6B6E6D;flex:0 0 auto;">
    <span style="line-height:13px;">L</span><span></span>
    <span style="line-height:13px;">X</span><span></span>
    <span style="line-height:13px;">V</span><span></span>
    <span style="line-height:13px;">D</span>
  </div>
  <div style="flex:1 1 auto;display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,13px);gap:3px;">
    {%- for col in calendar.cols -%}
    {%- for cell in col -%}
    {%- if cell -%}
    <div title="{{ cell.date }}: {{ cell.count }}" style="border-radius:2px;background:{{ shades[cell.level] }};"></div>
    {%- else -%}
    <div></div>
    {%- endif -%}
    {%- endfor -%}
    {%- endfor -%}
  </div>
</div>
<div style="display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:11px;color:#6B6E6D;margin-top:6px;">
  {{ _('Less') }}
  {%- for s in shades -%}<span style="display:inline-block;width:12px;height:12px;border-radius:2px;background:{{ s }};"></span>{%- endfor -%}
  {{ _('More') }}
</div>