{% set max_abs = (monthly_pl|map(attribute='net_pl')|map('abs')|max) if monthly_pl else 0 %}
<div class="panel mb-3">
  <div class="text-xs text-label-2 uppercase mb-2">
    {{ selected_year }} — monthly realized P&amp;L
    {% if event_count %}<span class="text-label-2 normal-case">· {{ event_count }} event{{ '' if event_count == 1 else 's' }} YTD</span>{% endif %}
  </div>
  <div class="grid grid-cols-12 gap-1 h-16 items-end">
    {% for m in monthly_pl %}
      {% if max_abs and m.net_pl != 0 %}
        {% set height_pct = ((m.net_pl|abs) / max_abs * 100)|round(1) %}
      {% else %}
        {% set height_pct = 0 %}
      {% endif %}
      <div class="relative h-full flex items-end justify-center" title="{{ '%02d'|format(m.month) }}: net ${{ '%.2f'|format(m.net_pl) }} · gain ${{ '%.2f'|format(m.gross_gain) }} · loss ${{ '%.2f'|format(m.gross_loss) }} · {{ m.trade_count }} trade(s)">
        <div class="w-full rounded-sm transition-opacity hover:opacity-80"
             style="height: {{ height_pct }}%; background-color: {% if m.net_pl > 0 %}var(--color-pos){% elif m.net_pl < 0 %}var(--color-neg){% else %}var(--color-surface-2){% endif %};">
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="grid grid-cols-12 gap-1 mt-1 text-[10px] text-label-3 text-center">
    {% for label in ["J","F","M","A","M","J","J","A","S","O","N","D"] %}
      <div>{{ label }}</div>
    {% endfor %}
  </div>
</div>