{% 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]">
        {{ company_name|default('—') }} · {{ instrument_kind|default('stock') }}
      </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">
    <div class="kpi" data-kpi-slot="open-lots">
      <div class="label-uc">Open lots</div>
      <div class="num text-[22px] font-bold mt-2">
        {{ kpi_open_lots }}{% 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" data-kpi-slot="realized">
      <div class="label-uc">Realized P&amp;L</div>
      <div class="num text-[22px] font-bold mt-2 {% if kpi_realized_ytd > 0 %}text-pos{% elif kpi_realized_ytd < 0 %}text-neg{% else %}text-label-2{% endif %}">
        {{ fmt_currency(kpi_realized_ytd) }}{% 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 %}">
          {{ fmt_currency(kpi_realized_lifetime) }}{% 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">
      <div class="label-uc">Disallowed</div>
      <div class="num text-[22px] font-bold mt-2 {% if kpi_disallowed_ytd > 0 %}text-neg{% else %}text-label-3{% endif %}">
        {{ fmt_currency(kpi_disallowed_ytd) }}
      </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 %}">
          {{ fmt_currency(kpi_disallowed_lifetime) }}
        </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>
      <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 id="ticker-tab-content"
       role="tabpanel"
       aria-labelledby="ticker-tab-{{ selected_view|default('timeline') }}">
    {% 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 %}
    <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 %}
  {% endif %}

  {% include "_schwab_lot_detail.html" %}

  <div id="trade-modal" class="hidden fixed inset-0 bg-overlay-strong z-50 flex items-center justify-center"
       onclick="this.classList.add('hidden')">
    <div id="trade-modal-content"></div>
  </div>
{% endblock %}