{# Math explainer fragment for the TOTAL ACCOUNT VALUE hero KPI tile.
   Receives `b: AccountValueBreakdown`. Loaded via HTMX from
   /portfolio/explain/account-value and swapped into a div under the tile. #}
<div class="panel p-4 mt-2 text-[13px] relative" data-explain="account-value">
  <button type="button"
          class="absolute top-2 right-3 text-label-1 hover:text-text text-[18px] leading-none cursor-pointer font-bold"
          hx-get="/portfolio/explain/dismiss"
          hx-target="#explain-account-value"
          hx-swap="innerHTML"
          title="Close">×</button>
  <div class="font-semibold mb-3 pr-6">Total Account Value — current snapshot</div>

  {# Equation 1 — Composition: where the money sits today. #}
  <div class="font-semibold text-label-1 mb-1">Composition</div>
  <div class="grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 items-baseline mb-3">
    <div class="text-label-2">Cash balance</div>
    <div class="num text-right">${{ "{:,.2f}".format(b.cash_balance|float) }}</div>

    <div class="text-label-2">+ Long stock &amp; ETF market value</div>
    <div class="num text-right">+${{ "{:,.2f}".format(b.long_stock_mv|float) }}</div>

    <div class="text-label-2">+ Long option market value</div>
    <div class="num text-right">+${{ "{:,.2f}".format(b.long_option_mv|float) }}</div>

    <div class="text-label-2">− Short option est. liability</div>
    <div class="num text-right">−${{ "{:,.2f}".format(b.short_option_liability|float) }}</div>

    <div class="font-semibold border-t border-hairline pt-2 mt-1">= Total Account Value</div>
    <div class="num text-right font-semibold border-t border-hairline pt-2 mt-1 {% if b.total_account_value < 0 %}text-neg{% else %}text-pos{% endif %}">
      {% if b.total_account_value < 0 %}−${{ "{:,.2f}".format(b.total_account_value|float|abs) }}{% else %}${{ "{:,.2f}".format(b.total_account_value|float) }}{% endif %}
    </div>
  </div>

  {# Equation 2 — Source: how it got there, lifetime. #}
  <div class="font-semibold text-label-1 mb-1 mt-4">Source (lifetime)</div>
  <div class="grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 items-baseline mb-3">
    <div class="text-label-2">Net contributed (deposits − withdrawals)</div>
    <div class="num text-right">{% if b.net_contributed < 0 %}−{% else %}+{% endif %}${{ "{:,.2f}".format(b.net_contributed|float|abs) }}</div>

    <div class="text-label-2">+ Lifetime realized P/L (economic, after wash)</div>
    <div class="num text-right {% if b.lifetime_realized_economic < 0 %}text-neg{% else %}text-pos{% endif %}">
      {% if b.lifetime_realized_economic < 0 %}−{% else %}+{% endif %}${{ "{:,.2f}".format(b.lifetime_realized_economic|float|abs) }}
    </div>

    <div class="text-label-2">+ Current unrealized P/L</div>
    <div class="num text-right {% if b.current_unrealized < 0 %}text-neg{% else %}text-pos{% endif %}">
      {% if b.current_unrealized < 0 %}−{% else %}+{% endif %}${{ "{:,.2f}".format(b.current_unrealized|float|abs) }}
    </div>

    <div class="font-semibold border-t border-hairline pt-2 mt-1">= Total Account Value</div>
    <div class="num text-right font-semibold border-t border-hairline pt-2 mt-1 {% if b.total_account_value < 0 %}text-neg{% else %}text-pos{% endif %}">
      {% if b.total_account_value < 0 %}−${{ "{:,.2f}".format(b.total_account_value|float|abs) }}{% else %}${{ "{:,.2f}".format(b.total_account_value|float) }}{% endif %}
    </div>
  </div>

  {# Footnote: economic vs tax-recognized clarification. #}
  <div class="mt-3 text-label-3 text-[11px] leading-snug">
    The Source equation uses <em>economic</em> realized — the cash that actually
    netted from closed positions. The Realized P/L KPI tile shows
    <em>tax-recognized</em> realized by default (with wash-sale-disallowed losses
    added back to basis), so it can differ from this row.
  </div>

  {# Caveats. #}
  {% if b.has_short_options %}
    <div class="mt-3 text-label-3 text-[11px] leading-snug" data-explain="short-option-caveat">
      Short options estimated as intrinsic value + straight-line time decay; confirm cost-to-close with your broker.
    </div>
  {% endif %}
  {% if b.missing_symbols %}
    <div class="mt-3 p-2 rounded border border-amber-500/40 bg-amber-500/10 text-amber-300 text-[11px] leading-snug" data-explain="missing-quotes-caveat">
      ⚠ {{ b.missing_symbols|length }} symbol{% if b.missing_symbols|length != 1 %}s{% endif %} carried at cost basis — no live quote
      ({{ b.missing_symbols[:8]|join(", ") }}{% if b.missing_symbols|length > 8 %}, +{{ b.missing_symbols|length - 8 }} more{% endif %}).
    </div>
  {% endif %}

  {# Footer: snapshot freshness + standard disclaimer. #}
  {% if b.fetched_at %}
    <div class="mt-3 text-label-3 text-[11px]">as of {{ b.fetched_at.strftime("%b %-d") }} quotes</div>
  {% endif %}
  <div class="mt-2 text-label-3 text-[11px]">⚠ This is informational only. Consult a tax professional before filing.</div>
</div>