{% extends "base.html" %}
{% from "_provenance_macros.html" import provenance_link %}
{% block title %}{{ symbol }} · net-alpha{% endblock %}
{% block content %}
  <div class="flex items-end justify-between flex-wrap gap-3 mb-4">
    <div>
      <h1>{{ symbol }}</h1>
      <div class="text-[13px] text-label-2 mt-[3px]">
        {% if company_name %}{{ company_name }} · {% endif %}{{ instrument_kind|default('stock', true) }}
      </div>
    </div>
    <div class="flex gap-2">
      <a href="/sim?ticker={{ symbol }}" class="btn">Sim sell</a>
      <button type="button" class="btn btn-ghost"
              onclick="
                fetch('/ticker/{{ symbol }}/add-form').then(r => r.text()).then(html => {
                  document.getElementById('trade-modal-content').innerHTML = html;
                  document.getElementById('trade-modal').classList.remove('hidden');
                });">⋯ More</button>
    </div>
  </div>

  <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4 mb-6 js-reveal">
    <div class="kpi" data-kpi-slot="open-lots" style="--reveal-i: 0">
      <div class="label-uc">Open lots</div>
      <div class="num num-promoted mt-2">
        <span class="js-countup-num" data-to="{{ kpi_open_lots }}" data-decimals="0">{{ kpi_open_lots }}</span>{% if open_shorts %}<span class="text-label-2 text-[14px] font-normal"> + {{ open_shorts|length }} short opt</span>{% endif %}
      </div>
      <div class="text-xs text-label-2 mt-1">Basis: {{ fmt_currency(kpi_open_basis) }}</div>
    </div>

    <div class="kpi panel-feature" data-kpi-slot="realized" style="--reveal-i: 1">
      <div class="label-uc">Realized P&amp;L</div>
      <div class="num num-promoted mt-2 {% if kpi_realized_ytd > 0 %}text-pos{% elif kpi_realized_ytd < 0 %}text-neg{% else %}text-label-2{% endif %}">
        {% if kpi_realized_ytd < 0 %}−{% endif %}$<span class="js-countup-num" data-to="{{ "%.2f"|format(kpi_realized_ytd|float|abs) }}" data-decimals="2">{{ "{:,.2f}".format(kpi_realized_ytd|float|abs) }}</span>{% if realized_ref %}{{ provenance_link(realized_ref) }}{% endif %}
      </div>
      <div class="text-xs text-label-2 mt-1">YTD {{ kpi_today.year }}</div>
      {% if account_ids %}
        <div class="mt-1 flex flex-wrap gap-1"
             hx-get="/reconciliation/{{ symbol }}?account_id={{ account_ids[0] }}&variant=badge"
             hx-trigger="load"
             hx-swap="innerHTML">
          <span class="text-[11px] text-label-2">checking…</span>
        </div>
      {% endif %}
      <div class="mt-2 pt-2" style="border-top:0.5px solid var(--color-hairline);">
        <div class="num text-sm font-semibold {% if kpi_realized_lifetime > 0 %}text-pos{% elif kpi_realized_lifetime < 0 %}text-neg{% else %}text-label-2{% endif %}">
          {% if kpi_realized_lifetime < 0 %}−{% endif %}$<span class="js-countup-num" data-to="{{ "%.2f"|format(kpi_realized_lifetime|float|abs) }}" data-decimals="2">{{ "{:,.2f}".format(kpi_realized_lifetime|float|abs) }}</span>{% if realized_lifetime_ref %}{{ provenance_link(realized_lifetime_ref) }}{% endif %}
        </div>
        <div class="text-xs text-label-2">Lifetime</div>
      </div>
    </div>

    <div class="kpi" data-kpi-slot="disallowed" style="--reveal-i: 2">
      <div class="label-uc">Disallowed</div>
      <div class="num num-promoted mt-2 {% if kpi_disallowed_ytd > 0 %}text-neg{% else %}text-label-3{% endif %}">
        {% if kpi_disallowed_ytd < 0 %}−{% endif %}$<span class="js-countup-num" data-to="{{ "%.2f"|format(kpi_disallowed_ytd|float|abs) }}" data-decimals="2">{{ "{:,.2f}".format(kpi_disallowed_ytd|float|abs) }}</span>
      </div>
      <div class="text-xs text-label-2 mt-1">YTD {{ kpi_today.year }}</div>
      <div class="mt-2 pt-2" style="border-top:0.5px solid var(--color-hairline);">
        <div class="num text-sm font-semibold {% if kpi_disallowed_lifetime > 0 %}text-neg{% else %}text-label-3{% endif %}">
          {% if kpi_disallowed_lifetime < 0 %}−{% endif %}$<span class="js-countup-num" data-to="{{ "%.2f"|format(kpi_disallowed_lifetime|float|abs) }}" data-decimals="2">{{ "{:,.2f}".format(kpi_disallowed_lifetime|float|abs) }}</span>
        </div>
        <div class="text-xs text-label-2">Lifetime</div>
      </div>
    </div>

    <details data-testid="ticker-kpi-more" class="col-span-2 md:col-span-3 xl:col-span-2 xl:contents" open style="--reveal-i: 3">
      <summary class="xl:hidden cursor-pointer text-[12px] text-label-2 px-2 py-1">More metrics</summary>
      <div class="kpi" data-kpi-slot="accounts">
        <div class="label-uc">Accounts</div>
        <div class="text-sm mt-2">
          {% for a in kpi_accounts %}<span class="font-mono">{{ a }}</span>{% if not loop.last %}, {% endif %}{% endfor %}
          {% if not kpi_accounts %}<span class="text-label-3">—</span>{% endif %}
        </div>
      </div>

      <div class="kpi" data-kpi-slot="last-trade">
        <div class="label-uc">Last trade</div>
        {% if kpi_last_trade %}
          <div class="text-sm mt-2">{{ kpi_last_trade.action }} <span class="font-mono num">{{ fmt_quantity(kpi_last_trade.quantity) }}</span></div>
          <div class="text-xs text-label-2"><span class="font-mono">{{ fmt_date(kpi_last_trade.date) }}</span></div>
        {% else %}
          <div class="text-sm text-label-2 mt-2">No trades</div>
        {% endif %}
      </div>
    </details>
  </div>

  {% include "_ticker_tabs.html" %}
  <div class="js-reveal">
    <div id="ticker-tab-content"
         role="tabpanel"
         aria-labelledby="ticker-tab-{{ selected_view|default('timeline') }}"
         style="--reveal-i: 0">
      {% if selected_view == 'lots' %}
        {% include "_ticker_view_lots.html" %}
      {% elif selected_view == 'recon' %}
        {% include "_ticker_view_reconciliation.html" %}
      {% else %}
        {% include "_ticker_view_timeline.html" %}
      {% endif %}
    </div>

    {% if violations %}
      <div style="--reveal-i: 1">
        <h2 class="text-xl mt-6 mb-2">Violations involving {{ symbol }}</h2>
        {% for violation in violations %}
          <div class="panel mb-2">
            {% include "_violation_card.html" %}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>

  {% include "_schwab_lot_detail.html" %}

  <div id="trade-modal" class="hidden fixed inset-0 bg-overlay-strong z-50 flex items-center justify-center"
       role="dialog"
       aria-modal="true"
       aria-label="Trade form"
       x-data
       x-on:keydown.window.escape="if (!$el.classList.contains('hidden')) $el.classList.add('hidden')"
       onclick="this.classList.add('hidden')">
    <div id="trade-modal-content"></div>
  </div>
{% endblock %}