{# Inputs:
    open_options: list[OpenOptionRow]   — both long and short, sorted by expiry
    cash_secured_total: Decimal
    premium_received_total: Decimal
    long_cost_total: Decimal
    today: date
    show: "open" | "all"  — All includes expired-but-not-yet-broker-closed contracts. #}
{% set _show = show|default('open') %}
{% set _expanded = open_options|length > 0 or (option_counts is defined and (option_counts.long > 0 or option_counts.short > 0)) %}
{# Use option_counts from the route (computed pre-slice) for accurate totals when paginated.
   Fall back to counting from open_options (the page slice) when option_counts is absent. #}
{% set _long_count = option_counts.long|default(open_options | selectattr('side', 'equalto', 'long') | list | length) %}
{% set _short_count = option_counts.short|default(open_options | selectattr('side', 'equalto', 'short') | list | length) %}
{% set _acct_qs_root %}{% for _a in selected_accounts | default([]) %}&account={{ _a|urlencode }}{% endfor %}{% endset %}

<details{% if _expanded %} open{% endif %}>
  <summary class="panel-head cursor-pointer">
    <h4>Open options</h4>
    <span class="meta"
          title="Live (non-expired) short option contracts only. Matches the Cash card's 'pledged' total and the Allocation donut's 'Cash · pledged' wedge.">
      {% if _long_count %}{{ _long_count }} long{% endif %}
      {% if _long_count and _short_count %} · {% endif %}
      {% if _short_count %}{{ _short_count }} short{% endif %}
      {% if cash_secured_total %} · ${{ "{:,.0f}".format(cash_secured_total) }} secured{% endif %}
      {% if premium_received_total %} · short premium <span class="text-pos">+${{ "{:,.2f}".format(premium_received_total) }}</span>{% endif %}
      {% if long_cost_total %} · long cost <span class="text-label-1">${{ "{:,.2f}".format(long_cost_total) }}</span>{% endif %}
      {% if expired_count is defined and expired_count > 0 %} · <span class="text-label-2" title="Expired contracts no longer hold collateral or carry market exposure; broker typically closes them server-side at expiry.">{{ expired_count }} expired (awaiting broker close)</span>{% endif %}
    </span>
  </summary>

  <div class="flex items-center gap-2 flex-wrap text-sm mt-2 mb-3">
    <span class="label-uc">Show:</span>
    <div class="seg">
      <button type="button"
              hx-get="/holdings/options?show=open{{ _acct_qs_root }}"
              hx-target="#holdings-options" hx-swap="innerHTML"
              class="{% if _show == 'open' %}seg-active{% endif %}"
              title="Live (non-expired) option contracts only.">Open</button>
      <button type="button"
              hx-get="/holdings/options?show=all{{ _acct_qs_root }}"
              hx-target="#holdings-options" hx-swap="innerHTML"
              class="{% if _show == 'all' %}seg-active{% endif %}"
              title="Open contracts plus expired-but-not-yet-broker-closed contracts.">All</button>
    </div>
  </div>

{% if not open_options %}
  <div class="text-label-2 text-[13px] py-3">
    {% if _show == 'all' %}No option positions in scope.{% else %}No open option positions.{% endif %}
  </div>
{% else %}
  {% if options_summary is defined and options_summary %}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-3">
      <div class="kpi kpi-numeric">
        <div class="label-uc">Open contracts</div>
        <div class="num text-base font-bold">{{ fmt_quantity(options_summary.open_contracts) }}</div>
      </div>
      <div class="kpi kpi-numeric">
        <div class="label-uc">Net premium</div>
        <div class="num text-base font-bold {% if options_summary.net_premium >= 0 %}text-pos{% else %}text-neg{% endif %}">{{ fmt_currency(options_summary.net_premium) }}</div>
      </div>
      <div class="kpi kpi-numeric">
        <div class="label-uc">Avg DTE</div>
        <div class="num text-base font-bold">{{ options_summary.avg_dte|round(0)|int }}d</div>
      </div>
    </div>
  {% endif %}
  <div class="flex flex-col">
    {# Bar = days-to-expiry on a fixed 0–365d scale. Same expiry → same bar.
       The fill is a single left→right gradient (urgent red → neutral amber →
       safe green) anchored to the full 365d track and clipped to the visible
       portion, so a longer bar naturally reveals more green. The DTE pill on
       the right still gets a bucket-keyed text color for at-a-glance urgency. #}
    {% set MAX_DTE = 365 %}
    {% for s in open_options %}
      {% set dte = (s.expiry - today).days %}
      {% if dte <= 7 %}{% set dte_class = 'text-warn' %}
      {% elif dte <= 21 %}{% set dte_class = 'text-label-1' %}
      {% else %}{% set dte_class = 'text-label-2' %}{% endif %}
      {% set _capped = dte if dte > 0 else 0 %}
      {% if _capped > MAX_DTE %}{% set _capped = MAX_DTE %}{% endif %}
      {% set fill_pct = (_capped / MAX_DTE * 100)|round(0, 'common') %}
      {% set is_long = s.side == 'long' %}
      <div class="grid items-center gap-[14px] py-[9px] text-[13px]"
           data-symbol="{{ s.ticker|upper }}"
           style="grid-template-columns: 60px 90px 110px 1fr 110px 100px; border-bottom: 0.5px solid var(--color-hairline);">
        <div class="text-[10px] uppercase font-semibold tracking-tightish"
             style="color: {% if is_long %}var(--color-accent){% else %}var(--color-warn){% endif %};">
          {{ 'LONG' if is_long else 'SHORT' }}
        </div>
        <div class="flex items-center gap-2 font-semibold tracking-tightish">
          <span style="width:6px; height:6px; border-radius:50%;
                       background:{% if s.call_put == 'P' %}var(--color-warn){% else %}var(--color-violet){% endif %};
                       box-shadow: 0 0 6px {% if s.call_put == 'P' %}var(--color-warn){% else %}var(--color-violet){% endif %};"></span>
          <a href="/ticker/{{ s.ticker }}" class="no-underline text-text">{{ s.ticker }}</a>
        </div>
        <div class="text-[12px] font-mono text-label-1">
          {% if s.call_put == 'C' %}CALL{% else %}PUT{% endif %} ${{ "%g"|format(s.strike) }}
          <div class="text-[10px] text-label-2">{{ s.expiry.strftime('%m/%d/%y') }}</div>
        </div>
        <div class="flex items-center gap-[10px]">
          <span class="text-[11px] text-label-2 num min-w-[88px]">
            {% if s.opened_at %}opened {{ (today - s.opened_at).days }}d ago{% else %}— {% endif %}
          </span>
          <div class="flex-1 h-[5px] rounded-full overflow-hidden relative" style="background: var(--color-hairline);"
               title="{{ dte }}d to expiry · bar length proportional to DTE on a fixed 0–365d scale">
            {# Gradient is sized to the full 365d track via background-size so
               the fill, clipped to fill_pct, always shows the correct slice
               of red→amber→green. fill_pct guarded against 0 to avoid div/0. #}
            {% set _bg_size = (10000 / fill_pct)|round(0, 'common') if fill_pct > 0 else 100 %}
            <div style="width: {{ fill_pct }}%; height: 100%; border-radius: 999px;
                        background-image: linear-gradient(to right, var(--color-neg) 0%, var(--color-warn) 50%, var(--color-pos) 100%);
                        background-size: {{ _bg_size }}% 100%;
                        background-position: left center;
                        background-repeat: no-repeat;"></div>
          </div>
        </div>
        <div class="text-right num text-[12px]">
          <div class="{% if is_long %}text-label-1 font-medium{% else %}text-pos font-medium{% endif %}">
            {% if is_long %}-${{ "{:,.2f}".format(s.cash_basis) }}{% else %}+${{ "{:,.2f}".format(s.cash_basis) }}{% endif %}
          </div>
          <div class="text-[10px] text-label-2">
            {% if is_long %}cost paid{% elif s.call_put == 'P' %}${{ "{:,.0f}".format(s.cash_secured) }} secured{% else %}premium{% endif %}
          </div>
        </div>
        <div class="text-right">
          <span class="badge badge-muted num text-[12px] font-semibold {{ dte_class }}"
                title="Days to expiry">
            {{ dte }}d
          </span>
        </div>
      </div>
    {% endfor %}
  </div>

  {% set page_base_url = '/holdings/options' %}
  {% set page_extra_qs %}&show={{ _show }}{{ _acct_qs_root }}{% endset %}
  {% set page_target = '#holdings-options' %}
  {% set page_swap = 'innerHTML' %}
  {% include "_pagination_footer.html" %}
{% endif %}
</details>