{% 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>

  {% if harvest_mode and ticker and qty %}
  <div class="panel mb-4 px-4 py-3" style="border-left: 3px solid #FFD60A;">
    <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"
        x-data="{ action: '{{ action_pref if action_pref else ('sell' if harvest_mode else 'sell') }}' }"
        class="panel mb-6">
    <div class="grid grid-cols-6 gap-3 items-end">
      <div class="col-span-1">
        <label class="block label-uc mb-1">Action</label>
        <div class="inline-flex rounded-md overflow-hidden text-sm seg">
          <button type="button"
                  @click="action='buy'"
                  :class="action==='buy' ? 'seg-active' : ''"
                  class="px-3 py-1.5 font-medium seg">Buy</button>
          <button type="button"
                  @click="action='sell'"
                  :class="action==='sell' ? 'seg-active' : ''"
                  class="px-3 py-1.5 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>
        <label class="block label-uc">Ticker</label>
        <input type="text" name="ticker" value="{{ ticker }}" list="ticker-list" required
               class="bg-surface text-text rounded-md px-2 py-1 font-mono text-[13px] w-full"
               style="border:0.5px solid rgba(255,255,255,0.08);"/>
        <datalist id="ticker-list">
          {% for t in tickers %}<option value="{{ t }}">{% endfor %}
        </datalist>
      </div>
      <div>
        <label class="block label-uc">Quantity</label>
        <input type="number" name="qty" step="0.01" value="{{ qty or '' }}" required
               class="bg-surface text-text rounded-md px-2 py-1 font-mono text-[13px] w-full"
               style="border:0.5px solid rgba(255,255,255,0.08);"/>
      </div>
      <div>
        <label class="block label-uc">Price{% if price_hint %} <span class="text-label-3 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 py-1 font-mono text-[13px] w-full"
               style="border:0.5px solid rgba(255,255,255,0.08);"/>
      </div>
      <div>
        <label class="block label-uc">Account (optional)</label>
        <select name="account" class="bg-surface text-text rounded-md px-2 py-1 text-[13px] w-full"
                style="border:0.5px solid rgba(255,255,255,0.08);">
          <option value="">All</option>
          {% for a in accounts %}<option value="{{ a }}" {% if account_pref == a %}selected{% endif %}>{{ a }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block label-uc">Date</label>
        <input type="date" name="trade_date" value="{{ today_iso }}" required
               class="bg-surface text-text rounded-md px-2 py-1 font-mono text-[13px] w-full"
               style="border:0.5px solid rgba(255,255,255,0.08);"/>
      </div>
    </div>
    <div class="mt-4 text-right">
      <button type="submit" class="btn">Run sim</button>
    </div>
  </form>

  <div id="sim-result"></div>
{% endblock %}