{# 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 #}
{% 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) %}

<details{% if _expanded %} open{% endif %}>
  <summary class="panel-head cursor-pointer">
    <h4>Open options</h4>
    <span class="meta">
      {% 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 %} · 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 %}
    </span>
  </summary>

{% if not open_options %}
  <div class="text-label-2 text-[13px] py-3">No open option positions.</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">
    {% 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 %}
      {% if s.opened_at %}
        {% set total_days = (s.expiry - s.opened_at).days %}
        {% set elapsed = (today - s.opened_at).days %}
        {% if total_days > 0 %}{% set fill_pct = (elapsed / total_days * 100)|round(0, 'common') %}{% else %}{% set fill_pct = 100 %}{% endif %}
      {% else %}
        {% set fill_pct = 50 %}
      {% endif %}
      {% 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-indigo){% endif %};
                       box-shadow: 0 0 6px {% if s.call_put == 'P' %}var(--color-warn){% else %}var(--color-indigo){% 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" style="background: var(--color-hairline);">
            <div style="width: {{ fill_pct }}%; height: 100%;
                        background: linear-gradient(90deg, var(--color-pos) 0%, var(--color-warn) 70%, var(--color-neg) 100%);
                        border-radius: 999px;"></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>

  {% if pagination is defined and pagination.total_rows > 0 %}
  <div class="flex items-center justify-between mt-3 text-[12px]">
    <div class="text-label-2">
      Showing {{ ((pagination.page - 1) * pagination.page_size) + 1 }}–{{ [pagination.page * pagination.page_size, pagination.total_rows]|min }} of {{ pagination.total_rows }}
    </div>
    <div class="flex items-center gap-3">
      {% if pagination.page > 1 %}
        <a class="text-label-1 hover:underline cursor-pointer"
           hx-get="/holdings/options?page={{ pagination.page - 1 }}&page_size={{ pagination.page_size }}{% if selected_account %}&account={{ selected_account }}{% endif %}"
           hx-target="#holdings-options"
           hx-swap="innerHTML">← Prev</a>
      {% else %}
        <span class="text-label-3">← Prev</span>
      {% endif %}
      <span class="text-label-2">Page {{ pagination.page }} / {{ pagination.total_pages }}</span>
      {% if pagination.page < pagination.total_pages %}
        <a class="text-label-1 hover:underline cursor-pointer"
           hx-get="/holdings/options?page={{ pagination.page + 1 }}&page_size={{ pagination.page_size }}{% if selected_account %}&account={{ selected_account }}{% endif %}"
           hx-target="#holdings-options"
           hx-swap="innerHTML">Next →</a>
      {% else %}
        <span class="text-label-3">Next →</span>
      {% endif %}
      <select class="text-label-2 bg-bg border border-hairline rounded px-1"
              hx-get="/holdings/options?page=1{% if selected_account %}&account={{ selected_account }}{% endif %}"
              hx-include="this"
              hx-target="#holdings-options"
              hx-swap="innerHTML"
              name="page_size">
        {% for size in pagination.page_size_options %}
          <option value="{{ size }}" {% if size == pagination.page_size %}selected{% endif %}>{{ size }} / page</option>
        {% endfor %}
      </select>
    </div>
  </div>
  {% endif %}
{% endif %}
</details>