{% extends "base.html" %}
{% block content %}

<nav class="section-nav" aria-label="Trades">
  <a href="/market" class="{{ 'active' if nav_active == 'market' }}">Market</a>
  <a href="/market/book" class="{{ 'active' if nav_active == 'market_book' }}">Order book</a>
  <a href="/trades" class="{{ 'active' if nav_active == 'trades' }}">Activity</a>
</nav>

{% if alert_ok %}<div class="alert alert-ok">{{ alert_ok }}</div>{% endif %}
{% if alert_err %}<div class="alert alert-err">{{ alert_err }}</div>{% endif %}

{# ---------------------------------------------------------------- price #}
<div class="stats">
  <div class="stat">
    <div class="stat-label">Price</div>
    <div class="stat-value">{{ fmt_price(display_price) }} XLM</div>
    <div class="stat-sub">
      {% if ticker %}per LAPSE, last traded{% else %}per LAPSE, reference{% endif %}
      {% if xlm_usd %}&middot; ${{ "%.4f"|format(display_price / 10000000 * xlm_usd) }}{% endif %}
    </div>
  </div>
  <div class="stat">
    <div class="stat-label">Available to buy</div>
    <div class="stat-value">{{ fmt_lapse_dp(best.sell_depth, 2) }}</div>
    <div class="stat-sub">across {{ depth.sells|length }} order{{ '' if depth.sells|length == 1 else 's' }}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Wanted</div>
    <div class="stat-value">{{ fmt_lapse_dp(best.buy_depth, 2) }}</div>
    <div class="stat-sub">across {{ depth.buys|length }} order{{ '' if depth.buys|length == 1 else 's' }}</div>
  </div>
</div>

{# The book itself lives on its own page (/market/book), linked from
   the nav above; the counts and depth it would repeat here are already
   in the Available to buy / Wanted stats above, so there is nothing
   left for a box here to say. #}

{# ------------------------------------------------------------ your wallet #}
<div class="card" style="margin-bottom:.6rem">
  <div class="card-title">Your trading wallet</div>
  {% if not xlm_addr %}
    <p style="font-size:.92rem; margin-bottom:.5rem">
      Trading needs a Stellar address. Generated locally, encrypted with
      your passphrase.
    </p>
    <form method="post">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="action" value="create_xlm_wallet">
      <div class="form-row">
        <label for="wallet_pass">Passphrase</label>
        <input id="wallet_pass" type="password" name="passphrase" required>
      </div>
      <div style="padding-top:.5rem">
        <button type="submit">Create Stellar address</button>
      </div>
    </form>
  {% else %}
    <table class="kv-table">
      <tr><td>LAPSE</td><td class="hash">{{ lapse_addr }}</td></tr>
      <tr><td>Balance</td><td>{{ fmt_lapse_dp(lapse_balance) }}</td></tr>
      <tr><td>Stellar</td><td class="hash">{{ xlm_addr }}</td></tr>
      <tr>
        <td>XLM available</td>
        <td>
          {% if xlm_account_exists %}
            {{ fmt_xlm(xlm_spendable) }} XLM
            {% if xlm_locked %}
              <span class="stat-sub">({{ fmt_xlm(xlm_locked) }} held as the account reserve, not spendable)</span>
            {% endif %}
          {% else %}
            <span style="color:var(--ink-dim)">
              Not funded yet. You can still sell LAPSE: the buyer's first
              payment creates the account for you and you pay nothing.
            </span>
          {% endif %}
        </td>
      </tr>
    </table>
  {% endif %}
</div>

{% if xlm_addr %}
{# ---------------------------------------------------------------- trade #}
<h2 style="margin-bottom:.2rem">Post an order</h2>
<p class="stat-sub" style="margin-top:0">
  Name your own price. A matching order already in the book is taken
  immediately; otherwise this waits until someone takes it. To take a
  specific order yourself, use the book above.
</p>

{# --------------------------------------------------------- resting order #}
<div class="card">
  <div class="tabs" role="tablist">
    <button type="button" class="tab is-active" data-side="buy" role="tab">Buy LAPSE</button>
    <button type="button" class="tab" data-side="sell" role="tab">Sell LAPSE</button>
  </div>

  <form method="post" id="order-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="action" value="place_order">
    <input type="hidden" name="direction" id="direction" value="buy">

    <div class="form-row">
      <label for="amount">Amount</label>
      <input id="amount" type="text" name="amount_lapse" inputmode="decimal"
             placeholder="0.00" required autocomplete="off">
      <span>LAPSE</span>
    </div>

    <div class="form-row">
      <label for="price">Price</label>
      <input id="price" type="text" name="price_xlm" inputmode="decimal"
             placeholder="0.0000000" required autocomplete="off"
             value="{{ suggested_price }}">
      <span>XLM each</span>
      <div class="stat-sub">
        {% if best.best_sell or best.best_buy %}
          Prefilled with the best book price.
        {% elif ticker %}
          Prefilled from this node's last trade, not a live quote.
        {% else %}
          Prefilled with a starting reference, not a real quote.
        {% endif %}
      </div>
    </div>

    <div class="form-row">
      <label>Total</label>
      <div class="stat-value" id="total-line"></div>
    </div>

    <div class="form-row">
      <label for="expiry_value">Expires in</label>
      <input id="expiry_value" type="number" min="1" value="7"
             inputmode="numeric" style="width:5rem" autocomplete="off">
      <select id="expiry_unit" autocomplete="off">
        <option value="1">hours</option>
        <option value="24" selected>days</option>
        <option value="168">weeks</option>
      </select>
      <input type="hidden" id="expiry_hours" name="expiry_hours"
             value="168" data-max="{{ max_expiry_hours }}">
      <div class="stat-sub">Up to {{ (max_expiry_hours / 24)|round(0, 'floor')|int }} days.</div>
    </div>

    <div class="form-row">
      <label for="min_fill">Smallest fill</label>
      <input id="min_fill" type="text" name="min_fill_lapse" inputmode="decimal"
             placeholder="0" autocomplete="off" readonly>
      <span>LAPSE</span>
      <label style="display:inline-flex; align-items:center; gap:.3rem;
                    font-weight:normal; margin-left:.6rem">
        <input type="checkbox" id="allow_partial" style="width:auto">
        allow partial fills
      </label>
      <div class="stat-sub" id="min-fill-note">
        Locked to the full amount: a taker must take it all at once. Check
        "allow partial fills" to set your own minimum, or none at all.
      </div>
    </div>

    <details style="margin:.4rem 0">
      <summary class="stat-sub" style="cursor:pointer">More options</summary>
      <div class="form-row">
        <label for="auto_match_margin">Auto-match margin</label>
        <input id="auto_match_margin" type="text" name="auto_match_margin_xlm"
               inputmode="decimal" placeholder="0" autocomplete="off">
        <span>XLM per LAPSE</span>
        <div class="stat-sub">
          How much worse than the price above this node will privately
          accept to close a match. Never shared; blank to only match at
          your own price.
        </div>
      </div>
    </details>

    <div class="form-row">
      <label for="order_pass">Passphrase</label>
      <input id="order_pass" type="password" name="passphrase" required>
    </div>

    <div style="padding-top:.5rem">
      <button type="submit" id="submit-btn" data-buy-label="Place buy order"
              data-sell-label="Place sell order">Place buy order</button>
    </div>
  </form>
</div>

{# --------------------------------------------------- pending fill requests #}
{% if pending_maker_requests %}
<h2>Requests waiting on your decision</h2>
<p style="font-size:.85rem; color:var(--ink-dim)">
  Reason shown below. Auto-accept settings are in <a href="/settings">Settings</a>.
</p>
<div class="table-wrap">
<table class="stacked">
  <thead>
    <tr><th>Order</th><th>From</th><th>Amount</th><th>Their standing</th><th>Why it's waiting</th><th></th></tr>
  </thead>
  <tbody>
    {% for r in pending_maker_requests %}
    <tr>
      <td data-label="Order">
        <span style="color:{{ 'var(--gain)' if r.direction == 'buy' else 'var(--loss)' }}">
          {{ 'Buying' if r.direction == 'buy' else 'Selling' }}
        </span>
      </td>
      <td data-label="From" class="hash-short">
        {{ short_addr(r.taker_lapse_addr) }}{{ trust_badge(r.taker_lapse_addr) | safe }}
      </td>
      <td data-label="Amount">{{ fmt_lapse_dp(r.lapse_total, 2) }}</td>
      <td data-label="Their standing">
        {% if r.trust.abandoned_count %}
          <span style="color:var(--loss); font-weight:bold">Took a payment, did not reciprocate</span>
        {% else %}
          <span style="color:{{ 'var(--gain)' if r.trust.score > 0 else 'var(--ink-dim)' }}">
            {{ fmt_score(r.trust.score) }}
            {%- if r.trust.completed_count %}
              ({{ r.trust.completed_count }} completed trade{{ '' if r.trust.completed_count == 1 else 's' }})
            {%- endif %}
          </span>
        {% endif %}
      </td>
      <td data-label="Why it's waiting">
        {% if not r.fits_cap %}
          <span style="color:var(--loss)" title="{{ r.fit_note }}">Over your exposure cap</span>
        {% elif r.below_trust_floor %}
          <span style="color:var(--ink-dim)">Below your auto-accept trust floor</span>
        {% else %}
          <span style="color:var(--ink-dim)">Could not fund this leg right now</span>
        {% endif %}
      </td>
      <td data-label="">
        <form method="post" style="display:flex; gap:.3rem; align-items:center; flex-wrap:wrap">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input type="hidden" name="action" value="answer_fill_request">
          <input type="hidden" name="request_id" value="{{ r.request_id }}">
          <input type="password" name="passphrase" placeholder="passphrase"
                 required style="width:9rem">
          <button type="submit" name="decision" value="accept" class="btn-sm">Accept</button>
          <button type="submit" name="decision" value="decline" class="btn-sm">Decline</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endif %}

{# --------------------------------------------------------- your own orders #}
{% if my_orders %}
<h2>Your open orders</h2>
{% if lapse_overcommitted or xlm_overcommitted %}
<div class="card">
  <div class="card-title">Your open orders ask for more than you hold</div>
  <p style="font-size:.92rem">
    {% if lapse_overcommitted %}
      Sell orders ask for {{ fmt_lapse_dp(lapse_committed, 2) }} LAPSE, you hold
      {{ fmt_lapse_dp(lapse_balance, 2) }}.
    {% endif %}
    {% if xlm_overcommitted %}
      Buy orders need {{ fmt_xlm(xlm_committed) }} XLM, {{ fmt_xlm(xlm_spendable) }} spendable.
    {% endif %}
    No funds at risk, but a fill may come back declined. Cancel or top up.
  </p>
</div>
{% endif %}
<div class="table-wrap">
<table class="stacked">
  <thead>
    <tr><th>Side</th><th>Amount</th><th>Received</th><th>Price</th><th>Margin</th><th>Expires</th><th></th></tr>
  </thead>
  <tbody>
    {% for o in my_orders %}
    <tr>
      <td data-label="Side">
        <span style="font-weight:bold; color:{{ 'var(--gain)' if o.direction == 'buy' else 'var(--loss)' }}">
          {{ 'Buying' if o.direction == 'buy' else 'Selling' }}
        </span>
      </td>
      <td data-label="Amount">{{ fmt_lapse_dp(o.lapse_total, 2) }}</td>
      <td data-label="Received">
        {# A ring, not a bar: how much the counterparty has actually
           paid this maker (market.received_ticks), not how much of
           the trade overall is done - the leg this maker's own risk
           actually depends on, not what it sent out itself. #}
        <span class="progress-ring"
             style="background: conic-gradient(var(--gain) {{ o.pct_received }}%, var(--paper-2) 0)"
             title="{{ fmt_lapse_dp(o.received, 2) }} of {{ fmt_lapse_dp(o.lapse_total, 2) }} paid in by the other side ({{ o.pct_received }}%){% if o.reserved %}, {{ fmt_lapse_dp(o.reserved, 2) }} accepted and awaiting payment{% endif %}{% if o.below_min_fill %}. The remainder is below your own minimum fill; nobody can take it any more{% endif %}"></span>
        <span class="stat-sub">{{ o.pct_received }}%</span>
      </td>
      <td data-label="Price">{{ fmt_price(o.price_stroops_per_lapse) }} XLM</td>
      <td data-label="Margin">
        {% if o.auto_match_margin_stroops %}
          {{ fmt_price(o.auto_match_margin_stroops) }} XLM
        {% else %}
          <span class="stat-sub">none</span>
        {% endif %}
      </td>
      <td data-label="Expires">
        {% if o.blocks_left > 0 %}~{{ fmt_duration(o.blocks_left * 120) }}{% else %}expired{% endif %}
      </td>
      <td data-label="">
        <form method="post" style="display:inline">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input type="hidden" name="action" value="cancel_order">
          <input type="hidden" name="order_id" value="{{ o.order_id }}">
          <input type="password" name="passphrase" placeholder="passphrase"
                 required style="width:11rem; display:inline-block; margin-right:.3rem">
          <button type="submit" class="btn-sm">Cancel</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endif %}
{% endif %}

<style>
  .tabs { display: flex; gap: .4rem; margin-bottom: .5rem;
          border-bottom: 1px solid var(--rule-lt); }
  .tab { background: var(--paper); color: var(--ink-dim);
         border: 1px solid var(--rule-lt); border-bottom: none;
         padding: .3rem 1rem; font-size: .85rem; cursor: pointer; }
  .tab.is-active { color: var(--ink); font-weight: bold;
                   border-color: var(--rule); background: var(--paper-2); }
  .trust-badge { font-size: .72rem; margin-left: .25rem; }
  .progress-ring { display: inline-block; vertical-align: middle;
                    width: 1.1rem; height: 1.1rem; border-radius: 50%;
                    border: 1px solid var(--rule-lt); margin-right: .3rem; }
</style>

<script>
(function () {
  // The order form's own Buy/Sell tabs, alongside its own hidden
  // "direction" input and its own submit button.
  Array.prototype.forEach.call(document.querySelectorAll(".tabs"), function (group) {
    var card = group.closest(".card");
    if (!card) return;
    var dirIn = card.querySelector('input[name="direction"]');
    var btn   = card.querySelector('button[type="submit"]');
    var tabs  = group.querySelectorAll(".tab");
    var buyLabel  = btn ? (btn.dataset.buyLabel  || btn.textContent) : "";
    var sellLabel = btn ? (btn.dataset.sellLabel || btn.textContent) : "";

    Array.prototype.forEach.call(tabs, function (tab) {
      tab.addEventListener("click", function () {
        Array.prototype.forEach.call(tabs, function (t) {
          t.classList.remove("is-active");
        });
        tab.classList.add("is-active");
        if (dirIn) dirIn.value = tab.dataset.side;
        if (btn) btn.textContent = tab.dataset.side === "buy" ? buyLabel : sellLabel;
        card.dispatchEvent(new CustomEvent("side-changed", {detail: tab.dataset.side}));
      });
    });
  });
})();

(function () {
  // The resting-order form's live total, tied to its own card only.
  var PRICE_DP = 7;
  var amount = document.getElementById("amount");
  var price  = document.getElementById("price");
  var total  = document.getElementById("total-line");
  var dirIn  = document.getElementById("direction");
  if (!amount || !price || !total || !dirIn) return;

  function recalc() {
    var a = parseFloat(amount.value), p = parseFloat(price.value);
    if (!isFinite(a) || !isFinite(p) || a <= 0 || p <= 0) {
      total.textContent = "";
      return;
    }
    var xlm = a * p;
    var verb = dirIn.value === "buy" ? "You pay" : "You receive";
    total.textContent = verb + " " + xlm.toFixed(PRICE_DP) + " XLM";
  }

  [amount, price].forEach(function (el) { el.addEventListener("input", recalc); });
  var card = document.getElementById("order-form").closest(".card");
  if (card) card.addEventListener("side-changed", recalc);
  recalc();
})();

(function () {
  // Smallest fill defaults to the full amount (locked, read-only) so an
  // order cannot be partially taken unless the maker deliberately opts
  // in - "allow partial fills" swaps it to an ordinary editable field,
  // starting blank (no minimum) rather than carrying over the amount
  // that was locked in a moment ago.
  var amount   = document.getElementById("amount");
  var minFill  = document.getElementById("min_fill");
  var allowBox = document.getElementById("allow_partial");
  var note     = document.getElementById("min-fill-note");
  if (!amount || !minFill || !allowBox || !note) return;

  function sync() {
    if (allowBox.checked) return;
    minFill.value = amount.value;
  }

  amount.addEventListener("input", sync);
  allowBox.addEventListener("change", function () {
    if (allowBox.checked) {
      minFill.readOnly = false;
      minFill.value = "";
      note.textContent = "Refuse fills below this. Blank for no minimum.";
    } else {
      minFill.readOnly = true;
      note.textContent = "Locked to the full amount: a taker must take "
        + "it all at once. Check \"allow partial fills\" to set your "
        + "own minimum, or none at all.";
      sync();
    }
  });
  sync();
})();

(function () {
  // Expires-in: a value plus a unit (hours/days/weeks), converted into
  // the single expiry_hours field the form actually submits, so
  // picking "3 months" never means computing hours by hand. Clamped to
  // the real protocol ceiling (data-max, from market.
  // MAX_EXPIRY_HORIZON_BLOCKS), not the much tighter, unrelated 30-day
  // limit this used to hard-code with no way to raise it.
  var value  = document.getElementById("expiry_value");
  var unit   = document.getElementById("expiry_unit");
  var hidden = document.getElementById("expiry_hours");
  if (!value || !unit || !hidden) return;
  var max = parseInt(hidden.dataset.max, 10) || 168;

  function recalc() {
    var v = parseFloat(value.value);
    if (!isFinite(v) || v <= 0) return;
    var hours = Math.round(v * parseFloat(unit.value));
    hidden.value = Math.min(Math.max(hours, 1), max);
  }

  [value, unit].forEach(function (el) { el.addEventListener("input", recalc); });
  recalc();
})();

(function () {
  // The book, the ticker and "your open orders" all change as gossip
  // arrives on this node, not just when this browser tab happens to be
  // reloaded, so a stale page can show an order as available when it
  // was actually filled or cancelled minutes ago. A plain reload rather
  // than a live-patched fetch: simplest correct thing, no new endpoint
  // to keep in sync with this page's own rendering, and the cost is one
  // ordinary page load every interval, not per order or per gossip
  // message. Skipped whenever the tab is hidden (nothing to update the
  // user cannot see) or a field currently has focus (never yank a form
  // out from under someone mid-entry).
  var REFRESH_MS = 20000;
  setInterval(function () {
    if (document.hidden) return;
    var active = document.activeElement;
    if (active && /^(INPUT|SELECT|TEXTAREA)$/.test(active.tagName)) return;
    location.reload();
  }, REFRESH_MS);
})();
</script>

{% endblock %}