{# Offset-budget tile: YTD realized loss vs $3,000 cap. #}
{% set _used = budget.used_against_ordinary|float %}
{% set _cap = budget.cap_against_ordinary|float %}
{% set _pct = (_used / _cap * 100) if _cap else 0 %}
{% set _pct_int = _pct|round(0,'floor')|int %}
{% set _carry = budget.carryforward_projection|float %}
<div class="kpi" data-testid="offset-budget">
  <div class="flex items-baseline justify-between">
    <div class="label-uc">Loss harvest budget</div>
    <div class="text-[11px] text-label-2">{{ budget.year }}</div>
  </div>
  <div class="num text-[22px] font-bold mt-2">
    ${{ "{:,.0f}".format(budget.used_against_ordinary) }}
    <span class="text-[12px] text-label-2 font-normal ml-1">of ${{ "{:,.0f}".format(budget.cap_against_ordinary) }} cap</span>
  </div>
  <div data-testid="offset-budget-bar"
       class="mt-2 h-[5px] rounded-full overflow-hidden" style="background: rgba(255,255,255,0.06);"
       role="progressbar" aria-valuenow="{{ _pct_int }}" aria-valuemin="0" aria-valuemax="100">
    <div style="width: {{ _pct_int }}%; height: 100%;
                background: linear-gradient(90deg, #5E5CE6 0%, #BF5AF2 100%);
                border-radius: 999px;"></div>
  </div>
  <div class="flex items-center justify-between mt-2 text-[11px]">
    <span class="text-label-2">{{ _pct_int }}% of cap used</span>
    {% if _carry > 0 %}
    <span class="text-label-2">Carryforward: <span class="num text-label-1">${{ "{:,.0f}".format(budget.carryforward_projection) }}</span></span>
    {% endif %}
  </div>
</div>