{% extends "base.html" %}
{% block head %}<link rel="stylesheet" href="/css/pages/mempool.css?v={{ local_version }}">{% endblock %}
{% block content %}
<div class="mempool-page">
  <div class="mempool-heading">
    <h2>Pending transactions</h2>
    <p class="stat-sub">Waiting for inclusion in a block, best fee rate first.</p>
  </div>
  <div class="mp-strip">
    <div class="mp-stat mp-main"><div class="mp-label">Transactions</div><div class="mp-value" id="mempool-count">{{ transactions|length }}</div></div>
    <div class="mp-stat"><div class="mp-label">Total fees</div><div class="mp-value" id="mp-total">{{ transactions|sum(attribute='tx.fee') }}</div></div>
    <div class="mp-stat"><div class="mp-label">Median fee</div><div class="mp-value" id="mp-median">-</div></div>
    <div class="mp-stat"><div class="mp-label">Highest fee</div><div class="mp-value" id="mp-max">-</div></div>
  </div>
  <div class="mempool-table-wrap">
    <table class="stacked mempool-table">
      <thead>
        <tr><th>Hash</th><th>From</th><th class="num">Fee</th><th class="num">Outputs</th><th>Status</th></tr>
      </thead>
      <tbody id="mempool-rows">
        {% include "mempool_rows.html" %}
      </tbody>
    </table>
  </div>
</div>
<script>
(function () {
  const rows = document.getElementById("mempool-rows");
  const count = document.getElementById("mempool-count");
  let pollInFlight = false;

  // Fee figures come from the data-fee attribute on each rendered row.
  function updateStats() {
    const fees = Array.from(rows.querySelectorAll("tr[data-fee]"))
      .map(r => Number(r.getAttribute("data-fee")) || 0).sort((a, b) => a - b);
    const n = fees.length;
    const fmt = v => v.toLocaleString();
    document.getElementById("mp-total").textContent = fmt(fees.reduce((s, v) => s + v, 0));
    document.getElementById("mp-median").textContent = n ? fmt(fees[Math.floor(n / 2)]) : "-";
    document.getElementById("mp-max").textContent = n ? fmt(fees[n - 1]) : "-";
  }

  async function refresh() {
    if (pollInFlight) return;
    pollInFlight = true;
    try {
      const res = await fetch("/api/mempool/fragment", {cache: "no-store"});
      if (!res.ok) throw new Error("bad status " + res.status);
      const data = await res.json();
      rows.innerHTML = data.html;
      count.textContent = data.size;
      updateStats();
    } catch (e) {
      // Keep the last good queue visible during a temporary network failure.
    } finally {
      pollInFlight = false;
    }
  }

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