{# Common HTMX query string for swapping pages/toggle. #}
{% set sym_qs %}{{ selected_symbols|join(',') }}{% endset %}
{% set qs %}period={{ selected_period }}&account={{ selected_account }}&group_options={{ group_options }}&symbols={{ sym_qs|urlencode }}{% endset %}
{% set qs_full %}{{ qs }}&show={{ show }}&page_size={{ page_size }}{% endset %}
<div class="flex items-center justify-between flex-wrap gap-2 mb-2 text-sm">
  <div class="flex items-center gap-2 flex-wrap">
    <span class="label-uc">Show:</span>
    <div class="seg">
      <button type="button"
              hx-get="/portfolio/positions?{{ qs }}&show=open&page=1&page_size={{ page_size }}"
              hx-target="#holdings-positions" hx-swap="innerHTML"
              class="{% if show == 'open' %}seg-active{% endif %}"
              title="Symbols with open quantity right now.">Open</button>
      <button type="button"
              hx-get="/portfolio/positions?{{ qs }}&show=all&page=1&page_size={{ page_size }}"
              hx-target="#holdings-positions" hx-swap="innerHTML"
              class="{% if show == 'all' %}seg-active{% endif %}"
              title="Open positions plus symbols you've fully closed in the selected period (showing realized P/L only).">All</button>
    </div>

    <div x-data='symbolFilter({{ symbol_filter_config|tojson }})'
         class="relative inline-block">
      <button type="button"
              @click="open = !open"
              class="px-2 py-1 text-[12px] rounded-md"
              style="background: var(--color-surface); color: var(--color-text); border: 0.5px solid var(--color-hairline);"
              x-text="label()"></button>
      <div x-show="open" @click.outside="open = false"
           class="absolute z-20 mt-1 left-0 w-64 rounded-md p-2"
           style="background: var(--color-surface); border: 0.5px solid var(--color-hairline); box-shadow: 0 4px 24px rgba(0,0,0,0.4);">
        <input type="text" x-model="query" placeholder="Search…"
               class="w-full px-2 py-1 text-[12px] rounded-md mb-2"
               style="background: var(--color-bg); color: var(--color-text); border: 0.5px solid var(--color-hairline);"/>
        <div class="max-h-56 overflow-y-auto">
          <template x-for="s in filtered()" :key="s">
            <label class="flex items-center gap-2 py-[3px] text-[12px] cursor-pointer">
              <input type="checkbox"
                     :checked="selected.indexOf(s) !== -1"
                     @change="toggle(s)"/>
              <span x-text="s" class="font-mono"></span>
            </label>
          </template>
          <template x-if="filtered().length === 0">
            <div class="text-[11px] text-label-3 py-2 text-center">No matches.</div>
          </template>
        </div>
        <div class="flex justify-end gap-2 pt-2 mt-2" style="border-top: 0.5px solid var(--color-hairline);">
          <button type="button" @click="clear()" class="px-2 py-1 text-[11px] text-label-2 hover:text-text">Clear</button>
          <button type="button" @click="apply()" class="px-2 py-1 text-[11px] rounded-md"
                  style="background: var(--color-accent); color: var(--color-bg);">Done</button>
        </div>
      </div>
    </div>

    <span class="text-[11px] text-label-2 ml-1">
      {{ total_rows }} {% if show == 'all' %}total{% else %}open{% endif %}
      {% if selected_symbols %}· {{ selected_symbols|length }} symbol{% if selected_symbols|length != 1 %}s{% endif %} filtered{% endif %}
      · account: {% if selected_account %}{{ selected_account }}{% else %}all{% endif %}
    </span>
  </div>

  <div class="flex items-center gap-2 flex-wrap">
    <label class="flex items-center gap-1 text-[11px] text-label-2">
      <span>Per page:</span>
      <select name="page_size"
              hx-get="/portfolio/positions?{{ qs }}&show={{ show }}&page=1"
              hx-trigger="change"
              hx-target="#holdings-positions" hx-swap="innerHTML"
              hx-include="this"
              class="text-[11px] px-1 py-[2px] rounded-md"
              style="background: var(--color-surface); color: var(--color-text); border: 0.5px solid var(--color-hairline);">
        {% for n in page_size_options %}
          <option value="{{ n }}" {% if n == page_size %}selected{% endif %}>{{ n }}</option>
        {% endfor %}
      </select>
    </label>

    {% if total_pages > 1 %}
      {% set prev_disabled = (page <= 1) %}
      {% set next_disabled = (page >= total_pages) %}
      <div class="flex items-center gap-1">
        <button type="button"
                {% if not prev_disabled %}hx-get="/portfolio/positions?{{ qs_full }}&page={{ page - 1 }}"
                hx-target="#holdings-positions" hx-swap="innerHTML"{% endif %}
                class="px-2 py-1 text-[11px] rounded-md {% if prev_disabled %}text-label-3 cursor-not-allowed{% else %}text-text hover:bg-surface-2{% endif %}"
                style="border:0.5px solid rgba(255,255,255,0.08); background: var(--color-surface);"
                {% if prev_disabled %}disabled{% endif %}>← Prev</button>
        <span class="text-[11px] text-label-2 px-2">page {{ page }} / {{ total_pages }}</span>
        <button type="button"
                {% if not next_disabled %}hx-get="/portfolio/positions?{{ qs_full }}&page={{ page + 1 }}"
                hx-target="#holdings-positions" hx-swap="innerHTML"{% endif %}
                class="px-2 py-1 text-[11px] rounded-md {% if next_disabled %}text-label-3 cursor-not-allowed{% else %}text-text hover:bg-surface-2{% endif %}"
                style="border:0.5px solid rgba(255,255,255,0.08); background: var(--color-surface);"
                {% if next_disabled %}disabled{% endif %}>Next →</button>
      </div>
    {% endif %}
  </div>
</div>

{% if not rows %}
  <div class="panel text-label-2 text-[13px]">
    {% if selected_symbols %}No symbols match the selected filter.
    {% elif show == 'all' %}No positions in scope.
    {% else %}No open positions.
    {% endif %}
  </div>
{% else %}
  <div class="panel" style="padding:0;">
    <table class="net-table">
      <thead>
        <tr>
          <th title="Underlying ticker. Options are merged into their underlying for quantity/market value (cash flows still tracked).">Symbol</th>
          <th title="All accounts that hold (or held) this symbol within the selected scope.">Accounts</th>
          <th class="r" title="Sum of remaining quantity across all open lots (equity only; options excluded).">Qty</th>
          <th class="r" title="Qty × latest fetched price. — when no price is available.">Mkt $</th>
          <th class="r" title="Sum of adjusted basis across open lots — i.e., cost basis after any wash-sale adjustments have been rolled into the replacement lot.">Open Cost</th>
          <th class="r" title="Open Cost ÷ Qty. The per-share book basis after wash-sale adjustments.">Avg Basis</th>
          <th class="r" title="(Total Buys − Total Sells, including option premium) ÷ current Qty. Your true per-share cash exposure on the position right now (independent of basis).">Cash Sunk/sh</th>
          <th class="r" title="Mkt $ − Open Cost on currently open lots. — when no price is available.">Unrealized</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
          <tr class="cursor-pointer"
              onclick="window.location='/ticker/{{ r.symbol }}'">
            <td>
              <div class="flex items-center gap-2 font-semibold tracking-tightish">
                <span class="w-5 h-5 rounded-md bg-surface-3 grid place-items-center text-[9px] font-bold text-label-1 shrink-0">{{ r.symbol[0] }}</span>
                {{ r.symbol }}
                {% if r.open_option_contracts and r.open_option_contracts != 0 %}
                  <span class="ml-1 text-[10px] uppercase pill"
                        style="color: var(--color-accent);"
                        title="Net |open contracts| across all option positions on this underlying.">
                    {{ "%g"|format(r.open_option_contracts|float) }} opt
                  </span>
                {% elif r.qty == 0 %}
                  <span class="ml-1 text-[10px] uppercase text-label-3">closed</span>
                {% endif %}
              </div>
            </td>
            <td class="text-[11px] text-label-2">
              {% if r.accounts|length <= 3 %}
                {{ r.accounts|join(' · ') }}
              {% else %}
                {{ r.accounts[0] }} +{{ r.accounts|length - 1 }} more
              {% endif %}
            </td>
            <td class="r num">{{ "%.4f"|format(r.qty|float) }}</td>
            <td class="r num">
              {% if r.market_value is none %}<span class="text-label-3">—</span>
              {% else %}${{ "%.2f"|format(r.market_value|float) }}{% endif %}
            </td>
            <td class="r num">${{ "%.2f"|format(r.open_cost|float) }}</td>
            <td class="r num">${{ "%.2f"|format(r.avg_basis|float) }}</td>
            <td class="r num">${{ "%.2f"|format(r.cash_sunk_per_share|float) }}</td>
            <td class="r num {% if r.unrealized_pl is not none and r.unrealized_pl < 0 %}text-neg{% elif r.unrealized_pl is not none and r.unrealized_pl > 0 %}text-pos{% endif %}">
              {% if r.unrealized_pl is none %}
                <span class="text-label-3">—</span>
              {% else %}
                <div>{% if r.unrealized_pl < 0 %}-{% else %}+{% endif %}${{ "%.2f"|format(r.unrealized_pl|float|abs) }}</div>
                {% if r.open_cost and r.open_cost|float != 0 %}
                  {% set pct = (r.unrealized_pl|float / r.open_cost|float) * 100 %}
                  <div class="text-[11px] opacity-80">{% if pct < 0 %}-{% else %}+{% endif %}{{ "%.1f"|format(pct|abs) }}%</div>
                {% else %}
                  <div class="text-[11px] text-label-3">—</div>
                {% endif %}
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <p class="text-label-3 text-[11px] mt-1">Click row to drill down</p>
{% endif %}