{% set active_page = 'sim' %}
{% extends "base.html" %}
{% block title %}Sim · net-alpha{% endblock %}
{% block content %}
  <h1 class="text-2xl mb-4">Simulate a trade</h1>

  <div id="sim-suggestions" hx-get="/sim/suggestions" hx-trigger="load" hx-swap="outerHTML"></div>

  {% if harvest_mode and ticker and qty %}
  <div class="panel mb-4 px-4 py-3" style="border-left: 3px solid var(--color-warn);">
    <div class="text-[12px] label-uc text-warn">Harvest mode</div>
    <div class="text-[13px] text-label-1 mt-1 leading-[1.5]">
      Pre-filled to sell <span class="num font-semibold">{{ qty }}</span>
      <span class="font-semibold">{{ ticker }}</span>
      {% if price_hint %}at the current quote <span class="num">${{ price_hint }}</span>{% endif %}.
      Hit <span class="font-semibold">Run sim</span> to preview realized P&amp;L, FIFO lot consumption, and any wash-sale traps before placing the harvest.
    </div>
  </div>
  {% endif %}

  <form hx-post="/sim" hx-target="#sim-result" hx-swap="innerHTML"
        hx-indicator="#sim-submit-spinner"
        x-data="{ action: '{{ action_pref if action_pref else ('sell' if harvest_mode else 'sell') }}' }"
        hx-on::after-request="
          if (event.detail.successful) {
            window.dispatchEvent(new CustomEvent('sim-ran', {
              detail: {
                ticker: this.querySelector('[name=ticker]').value,
                action: this.querySelector('[name=action]').value,
                qty: this.querySelector('[name=qty]').value,
                timestamp: new Date().toLocaleTimeString()
              }
            }));
          }
        "
        class="panel mb-6">
    {# Each column is a flex-col with a fixed-height label, a fixed-height input row,
       and helper text below. items-start + matched heights keep the inputs on the
       same horizontal baseline regardless of helper-text presence. #}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 items-start">
      <div class="col-span-1 flex flex-col">
        <label class="block label-uc mb-1 h-[14px] leading-[14px]">Action</label>
        <div class="inline-flex rounded-md overflow-hidden text-sm seg h-[30px]">
          <button type="button"
                  @click="action='buy'"
                  :class="action==='buy' ? 'seg-active' : ''"
                  class="px-3 font-medium seg">Buy</button>
          <button type="button"
                  @click="action='sell'"
                  :class="action==='sell' ? 'seg-active' : ''"
                  class="px-3 font-medium seg">Sell</button>
        </div>
        {# Hidden select carries the form value; Alpine keeps it in sync via x-model. #}
        <select name="action" x-model="action" class="hidden" aria-hidden="true">
          <option value="buy" {% if action_pref == 'buy' %}selected{% endif %}>Buy</option>
          <option value="sell" {% if action_pref == 'sell' %}selected{% endif %}>Sell</option>
        </select>
      </div>
      <div class="flex flex-col">
        <label class="block label-uc mb-1 h-[14px] leading-[14px]">Ticker</label>
        <input type="text" name="ticker" value="{{ ticker }}" list="ticker-list" required
               class="bg-surface text-text rounded-md px-2 font-mono text-[13px] w-full h-[30px]"
               style="border:0.5px solid var(--color-hairline);"/>
        <datalist id="ticker-list">
          {% for t in tickers %}<option value="{{ t }}">{% endfor %}
        </datalist>
        <p class="text-[11px] text-label-2 mt-1">Symbol exactly as it appears on your statement.</p>
      </div>
      <div class="flex flex-col">
        <label class="block label-uc mb-1 h-[14px] leading-[14px]">Quantity</label>
        <input type="number" name="qty" step="0.01" value="{{ qty or '' }}" required
               class="bg-surface text-text rounded-md px-2 font-mono text-[13px] w-full h-[30px]"
               style="border:0.5px solid var(--color-hairline);"/>
        <p class="text-[11px] text-label-2 mt-1">Shares for stock; contracts for options.</p>
      </div>
      <div class="flex flex-col">
        <label class="block label-uc mb-1 h-[14px] leading-[14px]">Price{% if price_hint %} <span class="text-label-2 text-[10px]">(quote ${{ price_hint }})</span>{% endif %}</label>
        <input type="number" name="price" step="0.01" value="{{ price_hint }}" required
               class="bg-surface text-text rounded-md px-2 font-mono text-[13px] w-full h-[30px]"
               style="border:0.5px solid var(--color-hairline);"/>
        {% if not price_hint and ticker %}
          <p class="text-[11px] text-warn mt-1">No quote available — enter manually.</p>
        {% endif %}
      </div>
      <div class="flex flex-col">
        <label class="block label-uc mb-1 h-[14px] leading-[14px]">
          Account <span class="text-label-2" x-text="action === 'sell' ? '(required)' : '(optional)'"></span>
        </label>
        <select name="account" class="bg-surface text-text rounded-md px-2 text-[13px] w-full h-[30px]"
                style="border:0.5px solid var(--color-hairline);">
          <option value="">All</option>
          {% for a in accounts %}<option value="{{ a }}" {% if account_pref == a %}selected{% endif %}>{{ a }}</option>{% endfor %}
        </select>
        {# Phase 3 review C3: sim form errors target this div via HTMX OOB swap. #}
        <div id="sim-form-error" data-testid="sim-form-error-slot"></div>
      </div>
      <div class="flex flex-col">
        <label class="block label-uc mb-1 h-[14px] leading-[14px]">Date</label>
        <input type="date" name="trade_date" value="{{ today_iso }}" required
               class="bg-surface text-text rounded-md px-2 font-mono text-[13px] w-full h-[30px]"
               style="border:0.5px solid var(--color-hairline);"/>
        <p class="text-[11px] text-label-2 mt-1">When the trade would settle.</p>
      </div>
    </div>
    <div class="mt-4 text-right">
      <button type="submit" class="btn inline-flex items-center gap-2">
        <span id="sim-submit-spinner">{% include "_spinner.html" %}</span>
        Run sim
      </button>
    </div>
  </form>

  <div id="sim-result"></div>
  <template id="sim-result-skeleton">
    {% with _skel_variant='result-panel' %}{% include "_skeleton.html" %}{% endwith %}
  </template>

  {% include "_sim_recents.html" %}
{% endblock %}