{% set partial = kpis.missing_symbols and (kpis.open_position_value is not none) %}
{% set period_label = kpis.period_label or 'Period' %}

<div class="grid grid-cols-12 gap-[10px]">

  {# --- Realized hero (combined YTD + Lifetime) --- #}
  <div class="kpi kpi-hero col-span-4">
    <div class="label-uc">Realized P/L</div>
    <div class="grid grid-cols-2 gap-3 mt-2 items-end">
      <div>
        <div class="text-[10px] uppercase font-medium text-label-3" style="letter-spacing:0.04em;">{{ period_label }}</div>
        <div class="num text-[22px] font-bold mt-[2px] {% if kpis.period_realized < 0 %}text-neg{% else %}text-pos{% endif %}">
          {% if kpis.period_realized < 0 %}−{% else %}+{% endif %}${{ "%.2f"|format(kpis.period_realized|float|abs) }}
        </div>
      </div>
      <div class="border-l pl-3" style="border-color: rgba(255,255,255,0.08);">
        <div class="text-[10px] uppercase font-medium text-label-3" style="letter-spacing:0.04em;">Lifetime</div>
        <div class="num text-[22px] font-bold mt-[2px] {% if kpis.lifetime_realized < 0 %}text-neg{% else %}text-pos{% endif %}">
          {% if kpis.lifetime_realized < 0 %}−{% else %}+{% endif %}${{ "%.2f"|format(kpis.lifetime_realized|float|abs) }}
        </div>
      </div>
    </div>
  </div>

  {# --- Unrealized hero (combined YTD + Lifetime) --- #}
  <div class="kpi col-span-4">
    <div class="label-uc">Unrealized P/L</div>
    <div class="grid grid-cols-2 gap-3 mt-2 items-end">
      <div>
        <div class="text-[10px] uppercase font-medium text-label-3" style="letter-spacing:0.04em;">{{ period_label }}</div>
        <div class="num text-[22px] font-bold mt-[2px]">
          {% if kpis.period_unrealized is none %}
            <span class="text-label-3">—</span>
          {% elif kpis.period_unrealized < 0 %}
            <span class="text-neg">−${{ "%.2f"|format(kpis.period_unrealized|float|abs) }}</span>
          {% else %}
            <span class="text-pos">+${{ "%.2f"|format(kpis.period_unrealized|float) }}</span>
          {% endif %}
        </div>
      </div>
      <div class="border-l pl-3" style="border-color: rgba(255,255,255,0.08);">
        <div class="text-[10px] uppercase font-medium text-label-3" style="letter-spacing:0.04em;">Lifetime</div>
        <div class="num text-[22px] font-bold mt-[2px]">
          {% if kpis.lifetime_unrealized is none %}
            <span class="text-label-3">—</span>
          {% elif kpis.lifetime_unrealized < 0 %}
            <span class="text-neg">−${{ "%.2f"|format(kpis.lifetime_unrealized|float|abs) }}</span>
          {% else %}
            <span class="text-pos">+${{ "%.2f"|format(kpis.lifetime_unrealized|float) }}</span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {# --- Open Position $ (mini) --- #}
  <div class="kpi col-span-2">
    <div class="label-uc">Open position $</div>
    <div class="num text-[22px] font-bold mt-2">
      {% if kpis.open_position_value is none %}
        <span class="text-label-3">—</span>
      {% else %}
        ${{ "%.2f"|format(kpis.open_position_value|float) }}
      {% endif %}
    </div>
    <div class="text-[11px] text-label-3 mt-1">
      {% if kpis.missing_symbols %}{{ kpis.missing_symbols|length }} unpriced{% else %}all priced{% endif %}
    </div>
  </div>

  {# --- Wash impact (mini) --- #}
  <div class="kpi col-span-2">
    <div class="label-uc">Wash impact</div>
    <div class="num text-[22px] font-bold mt-2">
      {% if wash_impact_total is defined and wash_impact_total %}
        <span class="text-warn">−${{ "%.2f"|format(wash_impact_total|float|abs) }}</span>
      {% else %}
        <span class="text-label-3">$0.00</span>
      {% endif %}
    </div>
    <div class="text-[11px] text-label-3 mt-1">
      {% if wash_violations is defined and wash_violations %}{{ wash_violations }} violation{% if wash_violations != 1 %}s{% endif %}{% else %}no violations{% endif %}
    </div>
  </div>

</div>

{% if snapshot is defined and snapshot.degraded %}
  <div class="text-[11px] text-warn mt-2">Showing stale prices (provider unavailable).</div>
{% endif %}
{% if kpis.missing_symbols %}
  <div class="text-[11px] text-warn mt-2">
    {% if kpis.open_position_value is none %}
      No quotes available.
    {% else %}
      Partial sum — {{ kpis.missing_symbols|length }} symbol{% if kpis.missing_symbols|length != 1 %}s{% endif %} unpriced:
      <span class="num">{{ kpis.missing_symbols|join(', ') }}</span>
    {% endif %}
  </div>
{% endif %}