{% 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 %}
<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">
      <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 }}">
    <div class="panel-head"><b>Recent transactions</b>{% if tx_total_pages > 1 %}<span>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></tr></thead>
      <tbody id="live-recent-txs">
      {% if recent_txs %}
        {% for height, h, t, amount in recent_txs %}
        <tr>
          <td class="num" data-label="Height"><a href="/block/{{ height }}">{{ height }}</a></td>
          <td class="fill" data-label="Hash"><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>
        </tr>
        {% endfor %}
      {% else %}
        <tr class="empty"><td colspan="4">No transactions yet</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 }}">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 }}">{{ p }}</a>
        {% endif %}
      {% endfor %}
      {% if tx_has_next %}<a href="/?tx_page={{ tx_page + 1 }}">Next</a>{% endif %}
    </nav>
    </div>
{% endif %}
  </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{{ " (" ~ info.nick ~ ")" if info.nick }}</b></div>
    <dl class="kv"><div><dt>This node</dt><dd class="addr" title="{{ (info.nick ~ ' - ') if info.nick }}{{ 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);

  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";
  }

  function fmtLapse(ticks) {
    return (ticks / TICKS_PER_LAPSE).toLocaleString(undefined, {
      minimumFractionDigits: 4, maximumFractionDigits: 4}) + " LAPSE";
  }

  function fmtLapseWhole(ticks) {
    return Math.floor(ticks / TICKS_PER_LAPSE).toLocaleString() + " LAPSE";
  }

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

  async function refresh() {
    try {
      const res = await fetch("/api/info", {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;
      document.getElementById("live-mempool").textContent = info.mempool_size;
      document.getElementById("live-peers").textContent = info.peer_count;
      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\"><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>" +
            "</tr>";
        }).join("");
      } else {
        txBody.innerHTML = "<tr class=\"empty\"><td colspan=\"4\">No transactions yet</td></tr>";
      }

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

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