{% extends "base.html" %}
{% block head %}<link rel="stylesheet" href="/css/pages/chain.css?v={{ local_version }}">
<link rel="stylesheet" href="/css/pages/dashboard.css?v={{ local_version }}">{% endblock %}
{% block content %}
{% if no_dht %}
<div class="alert alert-warn" id="no-dht-alert"{% if not no_peers %} hidden{% endif %}>
  <b>No peers, and no automatic discovery.</b>
  libtorrent is not installed, so this node cannot find peers through the DHT. Ask for a peer address on
  <a href="{{ discord }}" target="_blank" rel="noopener">Discord</a>, then add it on the <a href="/network">Network page</a>.
</div>
{% endif %}
<div class="dash">
<div class="dash-main">
  <div class="panel tip">
    {# The live poll below (refresh(), called immediately on load) fills
       these in within its first round trip; until then a spinner shows
       rather than the server-rendered figure, so a fresh node at a
       genuine height 0 with 0 peers doesn't read as broken on the very
       first paint. #}
    <div>
      <a class="tip-height" id="live-height-link" href="/block/{{ info.height }}">
        <span class="tip-label">Block height</span>
        <span class="tip-num" id="live-height"><span class="stat-spinner"></span></span>
      </a>
      {% if info.block_time_ratio is not none %}
      <span class="tip-sub {{ 'loss' if info.block_time_ratio > 1 else 'gain' }}" id="live-block-time-diff">{{ "%.1f" | format(info.block_time_ratio) }}x current median</span>
      {% else %}
      <span class="tip-sub" id="live-block-time-diff">no builds yet</span>
      {% endif %}
    </div>
    <div class="tip-figs">
      <div><span class="tip-label">Last block</span><span class="tip-fig" id="live-last-block">{% if tip_time %}<span data-age-ts="{{ tip_time }}" title="{{ utc_text(tip_time) }}">{{ fmt_age(server_now() - tip_time) }}</span>{% endif %}</span></div>
      <a href="/network"><span class="tip-label">Peers</span><span class="tip-fig" id="live-peers"><span class="stat-spinner"></span></span></a>
      <div><span class="tip-label">Pending</span><span class="tip-fig" id="live-mempool"><span class="stat-spinner"></span></span></div>
      <div><span class="tip-label">Sync</span><span class="tip-fig" id="live-sync"><span class="stat-spinner"></span></span></div>
    </div>
  </div>
  <div class="panel" data-tx-page="{{ tx_page }}" data-tx-query="{{ tx_query }}">
    <div class="panel-head">
      <b>Transactions</b>
      <form class="tx-filter" id="tx-filter" method="get" action="/" aria-label="Transaction types">
        {% for key, label in tx_kinds %}
        <label class="chip"><input type="checkbox" name="types" value="{{ key }}"{% if key in tx_selected %} checked{% endif %}><span>{{ label }}</span></label>
        {% endfor %}
        <noscript><button type="submit" class="chip-apply">Apply</button></noscript>
      </form>
      {% if tx_total_pages > 1 %}<span class="tx-pageno">page {{ tx_page }} of {{ tx_total_pages }}</span>{% endif %}
    </div>
    <table class="dt">
      <thead><tr><th class="num">Block</th><th>Hash</th><th class="hide-sm">From</th><th class="num">Amount</th><th class="num">Age</th></tr></thead>
      <tbody id="live-recent-txs">
      {% if recent_txs %}
        {% for height, h, t, amount in recent_txs %}
        {% set kind = tx_kind_of(t) %}
        <tr>
          <td class="num" data-label="Height"><a href="/block/{{ height }}">{{ height }}</a></td>
          <td class="fill" data-label="Hash">{% if kind != "payment" %}<span class="tx-kind">{{ "Board" if kind == "board" else "Fee request" }}</span>{% endif %}<a href="/tx/{{ h }}">{{ h[:20] }}…</a></td>
          <td class="hide-sm dim" data-label="From">{{ "self" if t.from == info.address else t.from[:24] ~ "…" }}</td>
          <td class="num" data-label="Amount">{{ fmt_lapse_dp(amount) }}</td>
          <td class="num dim" data-label="Age">{% if tx_times[height] %}<span data-age-ts="{{ tx_times[height] }}" title="{{ utc_text(tx_times[height]) }}">{{ fmt_age(server_now() - tx_times[height]) }}</span>{% endif %}</td>
        </tr>
        {% endfor %}
      {% else %}
        <tr class="empty"><td colspan="5">{{ "No transactions yet" if not tx_all else "No transactions of the selected types" }}</td></tr>
      {% endif %}
      </tbody>
    </table>
{% if tx_total_pages > 1 %}
    <div class="panel-foot">
    <nav class="pager" aria-label="Recent transaction pagination">
      {% if tx_has_prev %}<a href="/?tx_page={{ tx_page - 1 }}{% if tx_query %}&{{ tx_query }}{% endif %}">Prev</a>{% endif %}
      {% for p in tx_page_window %}
        {% if p is none %}<span class="pager-ellipsis">&hellip;</span>
        {% elif p == tx_page %}<span class="pager-current">{{ p }}</span>
        {% else %}<a href="/?tx_page={{ p }}{% if tx_query %}&{{ tx_query }}{% endif %}">{{ p }}</a>
        {% endif %}
      {% endfor %}
      {% if tx_has_next %}<a href="/?tx_page={{ tx_page + 1 }}{% if tx_query %}&{{ tx_query }}{% endif %}">Next</a>{% endif %}
    </nav>
    </div>
{% endif %}
  </div>
  <div class="panel support">
    <div class="panel-head">
      <b>Support LapseCoin</b>
      <div class="support-links">
        <a class="support-star" href="{{ SUPPORT.github }}" target="_blank" rel="noopener" title="Open source and built in the open. A star helps new people find it.">
          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5l2.0 4.2 4.6.6-3.4 3.2.9 4.5L8 11.6 3.9 14l.9-4.5L1.4 6.3l4.6-.6z"/></svg>
          Star on GitHub
        </a>
        {% for name, url in SUPPORT.listings %}<a href="{{ url }}" target="_blank" rel="noopener">{{ name }}</a>{% endfor %}
      </div>
    </div>
    <div class="support-body">
      <div class="support-addr">
        <span class="support-label">LAPSE</span>
        <button type="button" class="support-copy" data-copy="#support-lapse">Copy</button>
        <code id="support-lapse">{{ SUPPORT.lapse }}</code>
      </div>
      <div class="support-addr">
        <span class="support-label">Bitcoin</span>
        <button type="button" class="support-copy" data-copy="#support-btc">Copy</button>
        <code id="support-btc">{{ SUPPORT.bitcoin }}</code>
      </div>
    </div>
  </div>
</div>
<div class="dash-side">
  {# LAPSE with decimals rather than "N LAPSE M ticks": at this magnitude
     the tick half is nine digits that told nobody anything. #}
  <div class="panel">
    <div class="panel-head"><b>Supply</b></div>
    <dl class="kv">
      <div><dt>Circulating</dt><dd class="num"><span id="live-circulating">{{ fmt_lapse(info.circulating) }}</span>
        <span class="side-sub" id="live-circulating-pct">{{ "%.4f"|format(info.total_minted / supply_cap * 100) }}% of 21M cap minted{% if info.burned %}, {{ fmt_lapse(info.burned) }} burned{% endif %}</span></dd></div>
      <div><dt>Net emission</dt><dd class="num gain"><span id="live-reward">+{{ fmt_lapse_dp(info.block_reward) }}</span> <span class="side-sub">per block</span></dd></div>
    </dl>
  </div>
  <div class="panel">
    <div class="panel-head"><b>Network</b></div>
    <dl class="kv">
      <div><dt>Age</dt><dd class="num"><span id="live-age">{{ fmt_duration(info.network_age_seconds) }}</span> <span class="side-sub">since genesis</span></dd></div>
    </dl>
  </div>
{% if info.address %}
  <div class="panel">
    <div class="panel-head"><b>Address</b></div>
    <dl class="kv"><div><dt>This node</dt><dd class="addr" title="{{ info.address }}">{{ info.address }}</dd></div></dl>
  </div>
{% endif %}
</div>
</div>
<script>
(function () {
  const TICKS_PER_LAPSE = {{ TICKS_PER_LAPSE }};
  const SUPPLY_CAP = {{ supply_cap }};
  const SELF_ADDRESS = {{ info.address|tojson }};
  const TX_PAGE = parseInt(
    document.querySelector("[data-tx-page]").getAttribute("data-tx-page"), 10);
  // "types=board,payment" or "" for the default selection: the live refresh
  // asks for the same kinds the page was loaded with.
  const TX_QUERY = document.querySelector("[data-tx-page]").getAttribute("data-tx-query");
  const KIND_LABEL = {board: "Board", fees: "Fee request"};

  // Ticking a type reloads page 1 with the new selection in the URL, so it
  // survives paging and can be shared. The default selection keeps a clean URL.
  document.getElementById("tx-filter").addEventListener("change", function () {
    const picked = Array.from(this.querySelectorAll("input:checked")).map(function (i) { return i.value; });
    const isDefault = picked.length === 1 && picked[0] === "payment";
    window.location.href = isDefault ? "/" : "/?types=" + picked.join(",");
  });

  function fmtDuration(seconds) {
    seconds = Math.max(Math.floor(seconds || 0), 0);
    const units = [["y", 31536000], ["d", 86400], ["h", 3600], ["m", 60]];
    const parts = [];
    for (const [suffix, size] of units) {
      if (seconds >= size || parts.length) {
        const count = Math.floor(seconds / size);
        seconds -= count * size;
        if (count || parts.length) parts.push(count + suffix);
        if (parts.length === 2) return parts.join(" ");
      }
    }
    return parts.length ? parts.join(" ") : "just now";
  }

  // Same rule as fmt_lapse_dp in src/ui_common.py: a non-zero amount that
  // 4 decimals would print as 0.0000 is shown in ticks instead.
  function fmtLapse(ticks) {
    if (ticks > 0 && ticks * 2 * 10000 < TICKS_PER_LAPSE) {
      return ticks.toLocaleString() + (ticks === 1 ? " tick" : " ticks");
    }
    return (ticks / TICKS_PER_LAPSE).toLocaleString(undefined, {
      minimumFractionDigits: 4, maximumFractionDigits: 4}) + " LAPSE";
  }

  function fmtLapseWhole(ticks) {
    if (ticks > 0 && ticks < TICKS_PER_LAPSE) return fmtLapse(ticks);
    return Math.floor(ticks / TICKS_PER_LAPSE).toLocaleString() + " LAPSE";
  }

  // Copy buttons in the support panel. clipboard needs a secure context
  // (https or localhost); on a plain-http LAN address fall back to selecting
  // the text and execCommand.
  document.querySelectorAll(".support-copy").forEach(function (btn) {
    btn.addEventListener("click", function () {
      const el = document.querySelector(btn.getAttribute("data-copy"));
      const text = el.textContent.trim();
      const done = function () {
        btn.textContent = "Copied";
        setTimeout(function () { btn.textContent = "Copy"; }, 1500);
      };
      const fallback = function () {
        const r = document.createRange(); r.selectNodeContents(el);
        const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(r);
        try { if (document.execCommand("copy")) done(); } catch (e) {}
      };
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text).then(done, fallback);
      } else { fallback(); }
    });
  });

  const statusEl = document.getElementById("live-status");
  let syncStartH = -1, syncStartT = 0, bps = 0;

  async function refresh() {
    try {
      const res = await fetch("/api/info" + (TX_QUERY ? "?" + TX_QUERY : ""), {cache: "no-store"});
      if (!res.ok) throw new Error("bad status " + res.status);
      const info = await res.json();

      document.getElementById("live-height").textContent = info.height;
      document.getElementById("live-height-link").href = "/block/" + info.height;
      const lastBlock = document.querySelector("#live-last-block [data-age-ts]");
      if (lastBlock && info.tip_timestamp) {
        lastBlock.dataset.ageTs = info.tip_timestamp;
        lastBlock.textContent = window.lcAge(info.tip_timestamp);
      }
      document.getElementById("live-mempool").textContent = info.mempool_size;
      document.getElementById("live-peers").textContent = info.peer_count;
      const noDht = document.getElementById("no-dht-alert");
      if (noDht) noDht.hidden = info.peer_count > 0;
      const now = Date.now() / 1000;
      if (info.sync_target > info.height) {
        if (syncStartH === -1 || info.height < syncStartH) {
          syncStartH = info.height;
          syncStartT = now;
        } else if (info.height > syncStartH && now > syncStartT) {
          bps = (info.height - syncStartH) / (now - syncStartT);
        }
      } else {
        syncStartH = -1;
      }
      let syncStr = Math.round(info.sync_percent || 100) + "%";
      if (info.sync_percent < 100 && bps > 0 && info.sync_target > info.height) {
        const sec = Math.round((info.sync_target - info.height) / bps);
        let eta = "";
        if (sec > 3600) eta = Math.floor(sec/3600) + "h " + Math.floor((sec%3600)/60) + "m";
        else if (sec > 60) eta = Math.floor(sec/60) + "m " + (sec%60) + "s";
        else eta = sec + "s";
        syncStr += ` <span class="eta">(${eta})</span>`;
      }
      document.getElementById("live-sync").innerHTML = syncStr;
      document.getElementById("live-circulating").textContent = fmtLapseWhole(info.circulating);
      document.getElementById("live-circulating-pct").textContent =
        (info.total_minted / SUPPLY_CAP * 100).toFixed(4) + "% of 21M cap minted"
        + (info.burned ? ", " + fmtLapseWhole(info.burned) + " burned" : "");
      document.getElementById("live-reward").textContent = "+" + fmtLapse(info.block_reward);
      const diffEl = document.getElementById("live-block-time-diff");
      if (info.block_time_ratio === null) {
        diffEl.textContent = "no builds yet";
        diffEl.className = "tip-sub";
      } else {
        diffEl.textContent = info.block_time_ratio.toFixed(1) + "x current median";
        diffEl.className = "tip-sub " + (info.block_time_ratio > 1 ? "loss" : "gain");
      }

      document.getElementById("live-age").textContent =
        fmtDuration(info.network_age_seconds);

      const txBody = document.getElementById("live-recent-txs");
      const txs = info.recent_txs || [];
      if (TX_PAGE !== 1) {
        // The poll only ever carries the newest transactions, so writing
        // them into a table showing page 3 would silently yank the reader
        // back to page 1. Stats above still refresh.
      } else if (txs.length) {
        txBody.innerHTML = txs.map(function (tx) {
          return "<tr>" +
            "<td class=\"num\" data-label=\"Height\"><a href=\"/block/" + tx.height + "\">" + tx.height + "</a></td>" +
            "<td data-label=\"Hash\" class=\"fill\">" +
              (KIND_LABEL[tx.kind] ? "<span class=\"tx-kind\">" + KIND_LABEL[tx.kind] + "</span>" : "") +
              "<a href=\"/tx/" + tx.hash + "\">" + tx.hash.slice(0, 20) + "…</a></td>" +
            "<td data-label=\"From\" class=\"hide-sm dim\">" +
              (tx.from === SELF_ADDRESS ? "self" : tx.from.slice(0, 24) + "…") +
              "</td>" +
            "<td class=\"num\" data-label=\"Amount\">" + fmtLapse(tx.amount) + "</td>" +
            "<td class=\"num dim\" data-label=\"Age\">" + (tx.timestamp
              ? "<span data-age-ts=\"" + tx.timestamp + "\">" + window.lcAge(tx.timestamp) + "</span>" : "") + "</td>" +
            "</tr>";
        }).join("");
      } else {
        // Keep what the server rendered when it says why the list is empty.
        if (!txBody.querySelector(".empty")) {
          txBody.innerHTML = "<tr class=\"empty\"><td colspan=\"5\">No transactions of the selected types</td></tr>";
        }
      }

      statusEl.textContent = "refreshed " + new Date().toLocaleTimeString();
    } catch (e) {
      statusEl.textContent = "live refresh paused (connection lost)";
    }
  }

  refresh();
  setInterval(refresh, 6000);
})();
</script>
{% endblock %}