{% extends "base.html" %}
{% block title %}{{ symbol }} · net-alpha{% endblock %}
{% block content %}
  <div class="flex justify-between items-baseline mb-4">
    <h1 class="text-2xl font-mono text-primary">{{ symbol }}</h1>
    <div class="flex gap-2">
      <button type="button" class="btn"
              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');
                });
              ">Add trade</button>
      <a href="/sim?ticker={{ symbol }}" class="btn">Simulate sale</a>
    </div>
  </div>

  <div class="grid grid-cols-5 gap-4 mb-6">
    <div class="panel">
      <div class="label-uc">Open lots</div>
      <div class="text-2xl font-mono num">{{ kpi_open_lots }}</div>
      <div class="text-xs text-label-2 mt-1">Basis: ${{ "%.2f"|format(kpi_open_basis) }}</div>
    </div>
    <div class="panel">
      <div class="label-uc">YTD realized P&amp;L</div>
      <div class="text-2xl font-mono num {% if kpi_realized_ytd >= 0 %}text-pos{% else %}text-confirmed{% endif %}">
        ${{ "%.2f"|format(kpi_realized_ytd) }}
      </div>
    </div>
    <div class="panel">
      <div class="label-uc">YTD disallowed</div>
      <div class="text-2xl font-mono text-confirmed num">${{ "%.2f"|format(kpi_disallowed_ytd) }}</div>
    </div>
    <div class="panel">
      <div class="label-uc">Accounts</div>
      <div class="text-sm font-mono mt-1">
        {% for a in kpi_accounts %}{{ a }}{% if not loop.last %}, {% endif %}{% endfor %}
        {% if not kpi_accounts %}-{% endif %}
      </div>
    </div>
    <div class="panel">
      <div class="label-uc">Last trade</div>
      {% if kpi_last_trade %}
        <div class="text-sm font-mono mt-1">{{ kpi_last_trade.action }} {{ kpi_last_trade.quantity }}</div>
        <div class="text-xs text-label-2">{{ kpi_last_trade.date }}</div>
      {% else %}
        <div class="text-sm text-label-2 mt-1">No trades</div>
      {% endif %}
    </div>
  </div>

  <h2 class="text-xl mb-2">Timeline</h2>
  <div class="panel mb-6" style="padding:0;">
    <table class="net-table text-sm">
      <thead>
        <tr>
          <th>Date</th>
          <th>Account</th>
          <th>Provenance</th>
          <th>Action</th>
          <th>Qty</th>
          <th>Basis</th>
          <th>Proceeds</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for t in trades %}
          <tr>
            <td class="px-2 py-1 font-mono">{{ t.date }}</td>
            <td class="px-2 py-1">{{ t.account }}</td>
            <td class="px-2 py-1 text-[11px]">
              {% if t.is_manual %}<span class="pill" style="color: var(--color-accent);">manual</span>
              {% elif t.transfer_basis_user_set %}<span class="pill" style="color: var(--color-warn);">edited</span>
              {% endif %}
            </td>
            <td class="px-2 py-1">{{ display_action(t) }}</td>
            <td class="px-2 py-1 num font-mono">{{ t.quantity }}</td>
            <td class="px-2 py-1 num font-mono">{{ t.cost_basis if t.cost_basis is not none else "-" }}</td>
            <td class="px-2 py-1 num font-mono">{{ t.proceeds if t.proceeds is not none else "-" }}</td>
            <td class="px-2 py-1 text-[11px] r" id="trade-affordance-{{ t.id }}">
              {% if t.is_manual %}
                <a href="#" class="text-label-2 hover:text-text mr-2"
                   onclick="event.preventDefault();
                     fetch('/ticker/{{ symbol }}/edit-manual-form/{{ t.id }}').then(r => r.text()).then(html => {
                       document.getElementById('trade-modal-content').innerHTML = html;
                       document.getElementById('trade-modal').classList.remove('hidden');
                     });">edit</a>
                <a href="#" class="text-confirmed hover:text-text"
                   onclick="event.preventDefault();
                     fetch('/ticker/{{ symbol }}/delete-confirm/{{ t.id }}').then(r => r.text()).then(html => {
                       document.getElementById('trade-modal-content').innerHTML = html;
                       document.getElementById('trade-modal').classList.remove('hidden');
                     });">delete</a>
              {% elif t.basis_source in ['transfer_in', 'transfer_out'] %}
                <a href="#" class="text-label-2 hover:text-text"
                   onclick="event.preventDefault();
                     fetch('/ticker/{{ symbol }}/edit-transfer-form/{{ t.id }}').then(r => r.text()).then(html => {
                       document.getElementById('trade-modal-content').innerHTML = html;
                       document.getElementById('trade-modal').classList.remove('hidden');
                     });">set basis &amp; date</a>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
        {% if not trades %}
          <tr><td colspan="8" class="px-2 py-4 text-center text-label-2">No trades for {{ symbol }} yet.</td></tr>
        {% endif %}
      </tbody>
    </table>
  </div>

  <h2 class="text-xl mb-2">Open lots</h2>
  {% include "_lots_table.html" %}

  {% 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-black/60 z-50 flex items-center justify-center"
       onclick="this.classList.add('hidden')">
    <div id="trade-modal-content"></div>
  </div>
{% endblock %}