{# Common HTMX query string for swapping pages/toggle. #}
{% set sym_qs %}{{ selected_symbols|join(',') }}{% endset %}
{% set _sort = sort|default('market_value') %}
{% set _dir = dir|default('desc') %}
{% set qs %}period={{ selected_period }}&account={{ selected_account }}&group_options={{ group_options }}&symbols={{ sym_qs|urlencode }}&sort={{ _sort }}&dir={{ _dir }}{% endset %}
{% set qs_full %}{{ qs }}&show={{ show }}&page_size={{ page_size }}{% endset %}

{# Macro: a sortable column header. Toggles direction when re-clicked, otherwise
   defaults to descending. Preserves all current state via qs_full. #}
{% macro sort_th(key, label, align='', tooltip='') %}
  {% set cur = (_sort == key) %}
  {% set new_dir = 'asc' if (cur and _dir == 'desc') else 'desc' %}
  <th {% if align %}class="{{ align }}"{% endif %} {% if tooltip %}title="{{ tooltip }}"{% endif %}>
    <a href="#"
       hx-get="/portfolio/positions?period={{ selected_period }}&account={{ selected_account }}&group_options={{ group_options }}&symbols={{ sym_qs|urlencode }}&show={{ show }}&page_size={{ page_size }}&sort={{ key }}&dir={{ new_dir }}&page=1"
       hx-target="#holdings-positions" hx-swap="innerHTML"
       onclick="event.preventDefault()"
       class="cursor-pointer {% if cur %}text-text{% else %}hover:text-text{% endif %}"
       style="text-decoration:none;">
      {{ label }}{% if cur %} <span class="text-[9px]">{{ '↓' if _dir == 'desc' else '↑' }}</span>{% endif %}
    </a>
  </th>
{% endmacro %}
<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-2 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 extra_columns is defined and extra_columns %}
  <span hidden class="cols-meta"
    {% for col in extra_columns %}data-col="{{ col }}"{% endfor %}></span>
{% endif %}
{% 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 overflow-x-auto" style="padding:0;">
    <table class="net-table min-w-[960px]">
      <thead>
        <tr>
          {{ sort_th('symbol', 'Symbol', tooltip='Underlying ticker. Click to sort. Options are merged into their underlying for quantity/market value (cash flows still tracked).') }}
          <th title="All accounts that hold (or held) this symbol within the selected scope.">Accounts</th>
          {{ sort_th('qty', 'Qty', align='r', tooltip='Sum of remaining quantity across all open lots (equity only; options excluded). Click to sort.') }}
          {{ sort_th('market_value', 'Mkt $', align='r', tooltip='Qty × latest fetched price. — when no price is available. Click to sort.') }}
          {{ sort_th('open_cost', 'Open Cost', align='r', tooltip='Sum of adjusted basis across open lots. Click to sort.') }}
          {{ sort_th('avg_basis', 'Avg Basis', align='r', tooltip='Open Cost ÷ Qty. Per-share book basis after wash-sale adjustments. Click to sort.') }}
          {{ sort_th('cash_sunk', 'Cash invested / sh', align='r', tooltip="Net cash you've put in for this position, divided by current shares. Includes wash adjustments.") }}
          {{ sort_th('unrealized', 'Unrealized', align='r', tooltip='Mkt $ − Open Cost on currently open lots. — when no price is available. Click to sort.') }}
          {% if extra_columns is defined %}
            {% if 'days_held' in extra_columns %}<th data-col="days_held" class="r" title="Days since the oldest open lot was acquired.">Days held</th>{% endif %}
            {% if 'lt_st_split' in extra_columns %}<th data-col="lt_st_split" class="r" title="Quantity split between long-term (held > 365d) and short-term lots. Affects whether a sale realizes LTCG (favored rate) vs STCG.">LT / ST</th>{% endif %}
            {% if 'premium_received' in extra_columns %}<th data-col="premium_received" class="r" title="Net option premium received on this underlying (sells minus buys). Income from selling calls/puts.">Prem.</th>{% endif %}
            {% if 'origin_event' in extra_columns %}<th data-col="origin_event" title="The basis-creating event for the open lot — e.g., open-market buy, transfer-in, put assignment. (Not yet computed.)">Origin</th>{% endif %}
            {% if 'days_to_ltcg' in extra_columns %}<th data-col="days_to_ltcg" class="r" title="Days until the oldest short-term lot crosses the 1-year LTCG threshold. (Not yet computed.)">&rarr;LTCG</th>{% endif %}
            {% if 'harvestable' in extra_columns %}<th data-col="harvestable" class="r" title="Harvestable loss available on this position right now (capital loss the unrealized P&L would realize if you sold today). (Not yet computed.)">Harv.</th>{% endif %}
            {% if 'premium_offset' in extra_columns %}<th data-col="premium_offset" class="r" title="Premium received this year on this underlying that offsets cost basis when assignment occurs. (Not yet computed.)">Prem.&nbsp;off</th>{% endif %}
            {% if 'target' in extra_columns %}<th data-col="target" class="text-left" style="min-width:160px;" title="Your set target for this symbol — manage in Positions / Plan tab.">Target</th>{% endif %}
          {% endif %}
          <th class="w-10"></th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
          <tr data-row="position"
              class="group cursor-pointer hover:bg-surface-2"
              @click.stop="$dispatch('open-positions-pane', { sym: '{{ r.symbol }}', account_id: null })">
            <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-2">closed</span>
                {% endif %}
              </div>
            </td>
            <td class="text-[11px] text-label-2">
              {% set _displays = r.account_displays if r.account_displays else r.accounts %}
              {% if _displays|length <= 1 %}
                <span class="font-mono">{{ r.account_chip or (_displays[0] if _displays else '—') }}</span>
              {% else %}
                <span class="chip" title="{{ _displays|join(', ') }}">{{ r.account_chip or (_displays|join('+')) }}</span>
              {% endif %}
            </td>
            <td class="r num">{{ fmt_quantity(r.qty) }}</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">
              {% if (r.open_cost is none or r.open_cost == 0) and not r.basis_known and r.qty and r.qty != 0 %}
                {% include "_basis_missing_chip.html" %}
              {% else %}
                {{ fmt_currency(r.open_cost) }}
              {% endif %}
            </td>
            <td class="r num">
              {% if (r.avg_basis is none or r.avg_basis == 0) and not r.basis_known and r.qty and r.qty != 0 %}
                {% include "_basis_missing_chip.html" %}
              {% else %}
                {{ fmt_currency(r.avg_basis) }}
              {% endif %}
            </td>
            <td class="r num">{{ fmt_currency(r.cash_sunk_per_share) }}</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>
            {% if extra_columns is defined %}
              {% if 'days_held' in extra_columns %}<td class="r num">{{ r.days_held if r.days_held is not none else '—' }}{% if r.days_held is not none %}d{% endif %}</td>{% endif %}
              {% if 'lt_st_split' in extra_columns %}<td class="r num">{{ fmt_quantity(r.lt_qty) }}LT / {{ fmt_quantity(r.st_qty) }}ST</td>{% endif %}
              {% if 'premium_received' in extra_columns %}<td class="r num">${{ "%.0f"|format(r.premium_received|float) }}</td>{% endif %}
              {% if 'origin_event' in extra_columns %}<td>—</td>{% endif %}
              {% if 'days_to_ltcg' in extra_columns %}<td class="r num">—</td>{% endif %}
              {% if 'harvestable' in extra_columns %}<td class="r">—</td>{% endif %}
              {% if 'premium_offset' in extra_columns %}<td class="r num">—</td>{% endif %}
              {% if 'target' in extra_columns %}
                <td data-col="target" class="text-[12px]">
                  {% set _t = targets_by_symbol.get(r.symbol) if targets_by_symbol is defined else None %}
                  {% if _t %}
                    {% set _native = ('$%.0f' % _t.target_amount|float) if _t.target_unit.value == 'usd' else ('%.2f sh' % _t.target_amount|float) %}
                    {% set _curr = ('$%.0f' % r.market_value|float) if (_t.target_unit.value == 'usd' and r.market_value is not none) else ('%.2f sh' % r.qty|float) %}
                    {% if _t.target_unit.value == 'usd' and r.market_value is not none and _t.target_amount > 0 %}
                      {% set _pct = (r.market_value|float / _t.target_amount|float * 100) %}
                    {% elif _t.target_unit.value == 'shares' and _t.target_amount > 0 %}
                      {% set _pct = (r.qty|float / _t.target_amount|float * 100) %}
                    {% else %}
                      {% set _pct = 0 %}
                    {% endif %}
                    {% set _color = 'var(--color-info)' if _pct == 0 else ('var(--color-warn)' if _pct < 95 else ('var(--color-pos)' if _pct <= 105 else 'var(--color-neg)')) %}
                    <div class="flex items-center gap-2">
                      <span class="num text-[11px]">{{ _curr }} / <strong>{{ _native }}</strong></span>
                      <div class="flex rounded-full overflow-hidden" style="width:50px; height:4px; background:rgba(255,255,255,0.06);">
                        {% if _pct > 100 %}
                          <div style="width:{{ (100 / _pct * 100) }}%; height:100%; background:var(--color-pos);"></div>
                          <div style="width:{{ ((_pct - 100) / _pct * 100) }}%; height:100%; background:var(--color-neg);"></div>
                        {% else %}
                          <div style="width:{{ _pct }}%; height:100%; background:{{ _color }};"></div>
                        {% endif %}
                      </div>
                      <span class="num text-[10px]" style="color:{{ _color }};">{{ "%.0f"|format(_pct) }}%</span>
                    </div>
                  {% else %}
                    <span class="text-label-3 text-[11px]">— no target</span>
                  {% endif %}
                </td>
              {% endif %}
            {% endif %}
            <td class="w-10 relative">
              {% with sym=r.symbol, qty=r.qty, account=r.accounts[0] if r.accounts else '', account_id=none %}
                {% include "_row_actions.html" %}
              {% endwith %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if extra_columns is defined and ('days_to_ltcg' in extra_columns or 'harvestable' in extra_columns or 'premium_offset' in extra_columns or 'origin_event' in extra_columns) %}
    <p class="text-label-2 text-[11px] mt-1">
      <span class="num">→LTCG</span>, <span class="num">Harv.</span>,
      <span class="num">Prem.&nbsp;off</span>, and <span class="num">Origin</span>
      are tax-view placeholders &mdash; not yet wired to live data, so they show
      <span class="num">—</span> for every row. Hover any column header for what it will show.
    </p>
  {% endif %}
{% endif %}