{% extends "base.html" %}
{% block head %}<link rel="stylesheet" href="/css/pages/wallet.css?v={{ local_version }}">
<link rel="stylesheet" href="/css/pages/fees.css?v={{ local_version }}">{% endblock %}
{% block content %}
<div class="wl">
<h2>Fees</h2>
{% if alert_err %}<div class="alert alert-err">{{ alert_err }}</div>{% endif %}
<p class="wl-lede">Get gas on another network. Burn {{ lock_lapse }} LAPSE and a node operator sends it to you.</p>

<div class="wl-grid">
  <section class="panel">
    <div class="panel-head">Request gas</div>
    <form method="POST" action="/fees" id="fees-form" autocomplete="off" class="panel-body">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="form_token" value="{{ form_token }}">
      {% if low %}<p class="alert alert-err low">You need {{ lock_lapse }} LAPSE. Mine some, or get free LAPSE on
         <a href="{{ discord }}" target="_blank" rel="noopener">Discord</a>.</p>{% endif %}

      <div class="fields fees-fields">
        <div class="field">
          <label for="network">Network</label>
          <select id="network" name="network">
            {% for n in networks %}
            <option value="{{ n.slug }}" data-vm="{{ n.vm }}" {% if form.get('network') == n.slug %}selected{% endif %}>{{ n.name }} ({{ n.symbol }})</option>
            {% endfor %}
          </select>
        </div>
        <div class="field">
          <label for="action">What do you want to do</label>
          <select id="action" name="action">
            {% for a in actions %}
            <option value="{{ a.key }}" {% if form.get('action') == a.key %}selected{% endif %}>{{ a.label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="field">
        <label for="dest">Your address on that network</label>
        <input type="text" id="dest" name="dest" value="{{ form.get('dest', '') }}"
               placeholder="0x..." autocomplete="off" spellcheck="false">
      </div>

      <div class="submit-row stack-sm">
        <div class="field">
          <label for="passphrase">Your signing passphrase</label>
          <input type="password" id="passphrase" name="passphrase" placeholder="Passphrase" required>
        </div>
        <button type="submit" id="submit-btn" style="flex:0 0 auto" disabled>Burn {{ lock_lapse }} LAPSE and request</button>
      </div>
      <p class="hint fees-note">A free gift, as is. The {{ lock_lapse }} LAPSE comes back only if no node offers.</p>
    </form>
  </section>
  <aside class="panel panel-side">
    <div class="panel-head">What it needs</div>
    <p id="plan-line" class="estimate"></p>
    <p id="plan-err" class="alert alert-err" style="display:none"></p>
  </aside>
</div>
</div>

<script>
(function () {
  const $ = id => document.getElementById(id);
  const form = $("fees-form"), btn = $("submit-btn");
  const low = {{ 'true' if low else 'false' }};
  let plan = null, timer = null, seq = 0;

  const coin = (u, d, sym) => { const v = Number(u) / Math.pow(10, d); return (v >= 1 ? v.toFixed(4) : v.toPrecision(2)) + " " + sym; };
  const usd = v => "$" + Number(v).toFixed(2);

  function setErr(msg) { const el = $("plan-err"); el.textContent = msg || ""; el.style.display = msg ? "" : "none"; }
  // Only a result for exactly what is in the fields now can enable the button.
  function refresh() { btn.disabled = low || !(plan && plan.needs_help); }
  function invalidate() { plan = null; seq++; $("plan-line").textContent = ""; setErr(""); refresh(); }

  async function loadPlan() {
    const my = ++seq, dest = $("dest").value.trim();
    if (!dest) { plan = null; refresh(); return; }
    const q = new URLSearchParams({network: $("network").value, action: $("action").value, dest: dest});
    try {
      const p = await (await fetch("/api/fees/plan?" + q)).json();
      if (my !== seq) return;                               // fields changed meanwhile
      if (!p.ok) { plan = null; $("plan-line").textContent = ""; setErr(p.error); refresh(); return; }
      plan = p; setErr("");
      $("plan-line").textContent = !p.needs_help ? "That address already has enough."
        : "Needs about " + coin(p.target, p.decimals, p.symbol) + " (" + usd(p.target_usd) + "). Nodes send up to " + usd(p.cap_usd) +
          (p.covers_share < 1 ? ", which covers " + Math.round(p.covers_share * 100) + "% of it." : ".");
    } catch (e) { if (my === seq) { plan = null; setErr("Could not reach this node."); } }
    refresh();
  }
  const edited = () => { clearTimeout(timer); invalidate(); timer = setTimeout(loadPlan, 400); };
  ["network", "action", "dest"].forEach(id => $(id).addEventListener("input", edited));
  $("network").addEventListener("change", () => {
    $("dest").placeholder = $("network").selectedOptions[0].dataset.vm === "svm" ? "Solana address" : "0x...";
  });
  form.addEventListener("submit", e => {
    if (!(plan && plan.needs_help) || low) { e.preventDefault(); return; }
    btn.disabled = true;
  });

  if ($("dest").value) loadPlan();
})();
</script>
{% endblock %}