{# 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 %}
{% set _cf_st = (budget.incoming_carryforward_st|float) if budget.incoming_carryforward_st is defined else 0 %}
{% set _cf_lt = (budget.incoming_carryforward_lt|float) if budget.incoming_carryforward_lt is defined else 0 %}
{% set _cf_in = _cf_st + _cf_lt %}
<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: var(--color-hairline);"
       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>
  {% if _cf_in > 0 %}
  <div class="mt-1 text-[11px] text-label-2">
    Incoming carryforward (from prior years):
    <span class="num text-label-1">${{ "{:,.0f}".format(budget.incoming_carryforward_st) }}</span> ST
    + <span class="num text-label-1">${{ "{:,.0f}".format(budget.incoming_carryforward_lt) }}</span> LT
  </div>
  {% endif %}
</div>