{% extends "base.html" %}
{% set active_page = 'positions' %}
{% block title %}Positions · net-alpha{% endblock %}
{% block topbar_right %}{% endblock %}
{% block content %}
  <div class="flex items-end justify-between flex-wrap gap-3 mb-4">
    <div>
      <h1>Positions</h1>
      <div class="text-[13px] text-label-2 mt-[3px]">
        {% if selected_account %}{{ selected_account }}{% else %}All accounts{% endif %} ·
        {{ selected_period|default('YTD')|upper }}
      </div>
</div>
    {% if imports and selected_view in ('all', 'stocks') %}{% include "_portfolio_toolbar.html" %}{% endif %}
  </div>

  {# Emit column markers so tests / density.js can read extra_columns regardless
     of whether imports exist (empty-state path never reaches _portfolio_table). #}
  {% if extra_columns %}
    <span hidden class="cols-meta"
      {% for col in extra_columns %}data-col="{{ col }}" {% endfor %}></span>
  {% endif %}

  {# Symbol search — client-side filter applied to all rows with `data-symbol`
     (set by tab fragments). Partial match by underlying; for options that
     means typing the ticker shows every contract on it. #}
  <div class="mb-3">
    <input type="text"
           data-symbol-search
           data-testid="positions-symbol-search"
           placeholder="Search by symbol (e.g. SPY)…"
           @input="window.__applyPositionsSymbolFilter && window.__applyPositionsSymbolFilter($event.target.value)"
           aria-label="Search positions by symbol"
           class="bg-surface text-text rounded-md px-3 py-1.5 font-mono text-[13px] w-full md:w-72"
           style="border:0.5px solid var(--color-hairline);"/>
  </div>

  {% include "_positions_tabs.html" %}

  {% if selected_view == 'all' %}
    {% include "_positions_view_all.html" %}
  {% elif selected_view == 'stocks' %}
    {% include "_positions_view_stocks.html" %}
  {% elif selected_view == 'options' %}
    {% include "_positions_view_options.html" %}
  {% elif selected_view == 'at-loss' %}
    {% include "_positions_view_at_loss.html" %}
  {% elif selected_view == 'closed' %}
    {% include "_positions_view_closed.html" %}
  {% elif selected_view == 'plan' %}
    {% include "_positions_view_plan.html" %}
  {% endif %}

  {# Side pane (§3.5). Non-modal — table stays interactive while pane is
     open. Alpine state tracks the currently-open row. HTMX fetches the
     pane body from /positions/pane?sym=…&account_id=…. Closing zeros the
     state; clicking another row swaps content via @click on each <tr>. #}
  <aside id="positions-pane"
         class="positions-pane fixed inset-y-0 right-0 bg-bg border-l flex flex-col w-full lg:w-[480px]"
         style="border-color: var(--color-hairline); box-shadow: var(--shadow-pane);"
         x-data="{ open: false, sym: null, accountId: null }"
         x-show="open"
         x-on:open-positions-pane.window="
           open = true;
           sym = $event.detail.sym;
           accountId = $event.detail.account_id || null;
           htmx.ajax('GET', '/positions/pane?sym=' + encodeURIComponent(sym) + (accountId ? '&account_id=' + accountId : ''), '#positions-pane-body');
         "
         x-on:keydown.window.escape="open = false"
         x-on:click.outside="open = false"
         x-cloak
         role="complementary"
         aria-label="Position details">
    <header class="flex items-center justify-between px-4 py-3 border-b" style="border-color: var(--color-hairline);">
      <div class="flex items-center gap-2">
        <span class="font-semibold text-[14px]" x-text="sym || ''"></span>
      </div>
      <button data-testid="positions-pane-close"
              type="button"
              class="text-label-2 hover:text-text"
              @click="open = false"
              aria-label="Close pane">
        <img src="/static/icons/x.svg?v={{ asset_v }}" class="w-5 h-5 icon-mono" alt="">
      </button>
    </header>
    <div id="positions-pane-body" class="flex-1 overflow-y-auto px-4 py-4">
      <div class="text-label-2 text-[12px]">Loading…</div>
    </div>
  </aside>
{% endblock %}