{% extends "base.html" %}
{% block head %}<link rel="stylesheet" href="/css/pages/odds.css?v={{ local_version }}">{% endblock %}
{% block content %}
{% if not race %}
<div class="card odds-page odds-empty">
  <div class="card-title">Race odds</div>
  <p>Not enough chain history yet, check back after a few blocks.</p>
</div>
{% else %}
<div class="odds-page">
{% if not mining_enabled %}
<div class="odds-note">
  Not building right now: mining is off. Still fully validating and
  syncing every block. Turn on in <a href="/settings">Settings</a>.
</div>
{% endif %}
<div class="stats">
  <div class="stat" id="odds-tile" title="{{ ('Your pace %.1fs, %s. Fastest other builder %s. Draw window %gs.'|format(race.own_pace, 'from your own blocks' if race.own_pace_measured else ('estimated from calibration' if own_is_estimate else 'your VDF clock'), ('%.1fs'|format(race.field_fastest) if race.field_fastest is not none else 'none in this window'), race.draw_window)) if race.own_pace is not none else '' }}">
    <div class="stat-label">Odds</div>
    {% if waiting_zero_odds %}
    <div class="stat-value" id="odds-pct-val">Not mining</div>
    <div class="stat-sub" id="odds-pct-sub">odds are at or below your minimum, watching before building</div>
    {% else %}
    <div class="stat-value" id="odds-pct-val">{{ (("~" if own_is_estimate and not race.own_pace_measured else "") ~ "%.1f"|format(race.odds_pct) ~ "%") if race.odds_pct is not none else "--" }}</div>
    <div class="stat-sub" id="odds-pct-sub">{% set w = "%g"|format(race.draw_window) %}{% if race.odds_pct is none %}no blocks to judge from yet{% elif own_is_estimate and not race.own_pace_measured %}estimate: our pace is not measured yet{% elif race.odds_pct == 0 %}never inside the {{ w }}s draw window{% elif race.in_draw_pct < 95 %}in the {{ w }}s draw window on {{ "%.0f"|format(race.in_draw_pct) }}% of heights{% elif race.entrants < 1.05 %}only builder inside the {{ w }}s draw window{% else %}{{ "%.1f"|format(race.entrants) }} builders inside the {{ w }}s draw window{% endif %}</div>
    {% endif %}
  </div>
  <div class="stat">
    <div class="stat-label">Blocks won</div>
    <div class="stat-value" id="win-share-val">{{ ("%.1f"|format(race.win_share_pct) ~ "%") if race.win_share_pct is not none else "--" }}</div>
    <div class="stat-sub" id="win-share-sub">{{ "%d of the last %d"|format(race.own_blocks, race.window|length) }}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Self pace</div>
    <div class="stat-value" id="own-median-val">{{ ("%.1f"|format(race.own_pace) ~ "s") if race.own_pace is not none else "--" }}</div>
    <div class="stat-sub" id="own-median-sub">{{ "median interval of blocks we built" if race.own_pace_measured else ("estimated from calibration, no build finished yet" if own_is_estimate else "VDF clock: no block of ours in this window") }}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Window median</div>
    <div class="stat-value" id="window-median-val">{{ "%.1f"|format(race.median) }}s</div>
    <div class="stat-sub" id="window-count">{{ race.window|length }} blocks</div>
  </div>
  <div class="stat">
    <div class="stat-label">Deepest reorg</div>
    <div class="stat-value" id="reorg-deepest">{{ reorgs.deepest if reorgs.deepest else "none" }}</div>
    <div class="stat-sub" id="reorg-count">
      {% if reorgs.count %}{{ reorgs.count }} in 30 days, ties not counted
      {% else %}none deeper than a tie, 30 days{% endif %}
    </div>
  </div>
</div>

<div class="odds-main">
  <div class="odds-title">Block-to-block time, last {{ race.window|length }} blocks</div>
  <div class="chart-wrap">
  <svg id="odds-svg" viewBox="0 0 {{ chart.width }} {{ chart.height }}" width="100%" height="{{ chart.height }}"
       role="img" aria-label="Block interval over recent blocks, with self's median build time">
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ chart.plot_top }}"
          x2="{{ chart.points[0].x if chart.points else 0 }}" y2="{{ chart.plot_bottom }}"
          stroke="var(--rule)" stroke-width="1"/>
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ chart.plot_bottom }}"
          x2="{{ chart.width }}" y2="{{ chart.plot_bottom }}" stroke="var(--rule)" stroke-width="1"/>

    {% for t in chart.ticks %}
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ t.y }}"
          x2="{{ chart.width }}" y2="{{ t.y }}" stroke="var(--rule-lt)" stroke-width="0.5" opacity="0.6"/>
    <text x="4" y="{{ t.y + 3 }}" font-size="10" fill="var(--ink-dim)">{{ "%.0f"|format(t.value) }}s{{ t.suffix }}</text>
    {% endfor %}

    {# Height axis. The server draws it plain: gridlines and labels, no
       grips, since without JS there is nothing to drag them with. #}
    {% for t in chart.x_ticks %}
    {% set tx = chart.pad_l + t.frac * chart.plot_w %}
    {% if not loop.first and not loop.last %}
    <line x1="{{ tx }}" y1="{{ chart.plot_top }}" x2="{{ tx }}" y2="{{ chart.plot_bottom }}"
          stroke="var(--rule-lt)" stroke-width="0.5" opacity="0.6"/>
    {% endif %}
    <text x="{{ tx }}" y="{{ chart.plot_bottom + 17 }}" font-size="10" fill="var(--ink-dim)"
          text-anchor="{{ 'start' if loop.first else ('end' if loop.last else 'middle') }}">{{ t.height }}</text>
    {% endfor %}

    {% for p in chart.points %}
    {% if not loop.first %}
    {% set prev = chart.points[loop.index0 - 1] %}
    <line x1="{{ prev.x }}" y1="{{ prev.y }}" x2="{{ p.x }}" y2="{{ p.y }}"
          stroke="{{ p.color }}" stroke-width="1.75">
      <title>Block {{ p.height }}: {{ "%.1f"|format(p.seconds) }}s{{ ", " ~ p.nick ~ " (" ~ p.builder ~ ")" if p.nick else (", " ~ p.builder if p.builder) }}{{ " (off scale, clipped to the edge)" if p.clipped }}</title>
    </line>
    {% endif %}
    {% endfor %}

    <!-- Reference lines render last (on top of the data) so their labels
         stay legible over whatever color the data line happens to be
         passing through at that height. -->
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ chart.median_y }}"
          x2="{{ chart.width }}" y2="{{ chart.median_y }}"
          stroke="var(--ink-dim)" stroke-width="1.25" stroke-dasharray="4,3"/>
    {# When the two reference lines sit within 14px of each other, the upper
       one labels above its line and the lower one below, so the labels never overlap. #}
    {% set close = chart.own_y is not none and (chart.own_y - chart.median_y)|abs < 14 %}
    <text x="{{ chart.width - 4 }}" y="{{ chart.median_y + 11 if close and chart.median_y > chart.own_y else chart.median_y - 4 }}" font-size="10" font-weight="600"
          fill="var(--ink-dim)" text-anchor="end" paint-order="stroke" stroke="var(--paper)" stroke-width="3">window median {{ "%.0f"|format(race.median) }}s</text>

    {% if chart.own_y is not none %}
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ chart.own_y }}"
          x2="{{ chart.width }}" y2="{{ chart.own_y }}"
          stroke="var(--accent)" stroke-width="1.5" stroke-dasharray="5,4"/>
    <text x="{{ chart.width - 4 }}" y="{{ chart.own_y + 11 if close and chart.own_y >= chart.median_y else chart.own_y - 4 }}" font-size="10" font-weight="600"
          fill="var(--accent)" text-anchor="end" paint-order="stroke" stroke="var(--paper)" stroke-width="3">self pace{{ " (off scale)" if chart.own_clipped }}</text>
    {% endif %}
  </svg>
  </div>
  <div class="chart-foot">
  <div id="odds-legend">
    {% for entry in chart.legend or [] %}
    <span class="lg" tabindex="0">
      <span class="lg-dot" style="background:{{ entry.color }}"></span>
      {% if entry.label %}
        {% if entry.nick %}<span class="lg-name">{{ entry.nick }}</span>
        {% else %}<span class="lg-name hash-short">{{ entry.label[:10] }}&hellip;</span>{% endif %}
      {% else %}<span class="lg-name">Other</span>{% endif %}
      <span class="n">({{ entry.count }})</span>
      <span class="lg-pop" role="tooltip">
        <span class="lg-who">{% if entry.label %}{{ entry.nick or "Builder" }}{% else %}All other builders{% endif %}</span>
        {% if entry.label %}<span class="lg-addr">{{ entry.label }}</span>{% endif %}
        <span class="lg-sub">{{ entry.count }} of {{ entry.total }} blocks</span>
        {% if entry.machines %}
        <span class="lg-head"><span>Machine, fastest first</span><span>Blocks</span><span>Median</span></span>
        {% for m in entry.machines %}
        <span class="lg-row"><span>{{ m.name }}</span><span>{{ m.blocks }}</span><span>{{ "%.0f"|format(m.pace) }}s</span></span>
        {% endfor %}
        {% endif %}
      </span>
    </span>
    {% endfor %}
  </div>
  {% if hardware %}<div class="odds-hw"><div class="stat-label">Hardware</div><div class="odds-hw-val">{{ hardware.cpu }} &middot; {{ hardware.os }}</div></div>{% endif %}
  <button type="button" id="odds-zoom-reset" class="btn-sm" style="display:none">Reset spacing</button>
  </div>
</div>
<script id="odds-initial" type="application/json">{{ {"chart": chart, "median": race.median}|tojson }}</script>
<script>
(function () {
  function fmt1(n) { return n.toFixed(1); }
  function fmt0(n) { return Math.round(n); }

  // A nickname is free-form user text (see api.py's build_board_body),
  // unlike an address (a fixed BIP39 word list, no special characters
  // possible), so it's the one thing here that has to be escaped before
  // going into innerHTML below -- the server-rendered legend gets this
  // for free from Jinja's own auto-escaping, this JS-rebuilt one (the
  // live /api/odds refresh) does not.
  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, c => ({
      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
    }[c]));
  }

  // ---- height-axis spacing -------------------------------------------
  // The axis ticks double as handles. Dragging one moves where that block
  // height sits on screen, never which block it names, so the blocks on
  // either side of it gain or lose width. Nothing is ever hidden: the
  // whole window stays drawn, the space it is drawn across is just
  // redistributed, which is why only x is recomputed here and y comes
  // straight from the server as before.
  //
  // Positions are fractions of the plot width, so they keep meaning as
  // the window slides and the labels come to name different blocks.
  const STORE_KEY = "lapsecoin.odds.x_grips";
  // Minimum gap between two handles, as a fraction of the plot width.
  // Set by the handle's own width (40 units of an 814-unit plot): below
  // that two of them overlap, so a squeezed segment would end up with
  // handles you cannot tell apart or grab to undo it.
  const MIN_GAP = 0.05;
  let grips = null;      // fractions, one per x tick, or null for "even"
  let dragging = -1;
  let lastChart = null, lastMedian = null;

  function defaultGrips(chart) {
    return (chart.x_ticks || []).map(function (t) { return t.frac; });
  }

  function draggable(chart) {
    // Two ticks are the pinned ends, so there is no interior lever and
    // nothing to drag. Short windows land here (see _X_TICK_MIN_BLOCKS).
    return (chart.x_ticks || []).length > 2;
  }

  function isDefault(chart) {
    if (!grips) return true;
    const d = defaultGrips(chart);
    return grips.length === d.length &&
           grips.every(function (g, i) { return Math.abs(g - d[i]) < 1e-6; });
  }

  function loadGrips(chart) {
    const d = defaultGrips(chart);
    try {
      const raw = window.localStorage.getItem(STORE_KEY);
      if (raw) {
        const saved = JSON.parse(raw);
        // A saved arrangement only applies to an axis of the same shape.
        // The tick count changes when the window is short or crosses a
        // vdf_iterations regime, and a stale one would map onto the wrong
        // segments, so it is dropped rather than stretched to fit.
        if (Array.isArray(saved) && saved.length === d.length &&
            saved.every(function (v) { return typeof v === "number" && v >= 0 && v <= 1; })) {
          return saved;
        }
      }
    } catch (e) { /* private window, blocked storage: even spacing is fine */ }
    return d;
  }

  function saveGrips(chart) {
    try {
      if (isDefault(chart)) window.localStorage.removeItem(STORE_KEY);
      else window.localStorage.setItem(STORE_KEY, JSON.stringify(grips));
    } catch (e) { /* not worth failing the render over */ }
  }

  function xOf(chart, idx) {
    const ticks = chart.x_ticks || [];
    if (!grips || ticks.length < 2) {
      const n = chart.points.length;
      return chart.pad_l + (idx / Math.max(n - 1, 1)) * chart.plot_w;
    }
    let i = ticks.length - 2;
    for (let k = 0; k < ticks.length - 1; k++) {
      if (idx <= ticks[k + 1].idx) { i = k; break; }
    }
    const span = ticks[i + 1].idx - ticks[i].idx;
    const t = span ? (idx - ticks[i].idx) / span : 0;
    return chart.pad_l + (grips[i] + t * (grips[i + 1] - grips[i])) * chart.plot_w;
  }

  function renderAxis(chart) {
    const ticks = chart.x_ticks || [];
    const canDrag = draggable(chart);
    let s = "";
    ticks.forEach(function (t, i) {
      const x = chart.pad_l + grips[i] * chart.plot_w;
      const last = i === ticks.length - 1;
      const end = i === 0 || last;
      if (!end && !canDrag) {
        s += `<line x1="${x}" y1="${chart.plot_top}" x2="${x}" y2="${chart.plot_bottom}" stroke="var(--rule-lt)" stroke-width="0.5" opacity="0.6"/>`;
      }
      const anchor = i === 0 ? "start" : (last ? "end" : "middle");
      const b = chart.plot_bottom;
      if (end || !canDrag) {
        s += `<text x="${x}" y="${b + 17}" font-size="10" fill="var(--ink-dim)" text-anchor="${anchor}">${t.height}</text>`;
        return;
      }
      // One shape per handle: a rounded bar straddling the axis line,
      // which is what a slider thumb on a track looks like. Everything
      // else that was here (arrows, a pill, bolder labels) was signal
      // piled on signal, and four marks per handle across three handles
      // is a cluttered axis.
      //
      // Its own gridline is inside the group, so hovering the thumb lights
      // the line it moves and the connection needs no explaining. The
      // transparent rect is the hit area; the labels stay uniform.
      const top = chart.plot_top;
      s += `<g class="x-grip${i === dragging ? " is-held" : ""}" data-grip="${i}">` +
           `<line class="x-grip-line" x1="${x}" y1="${top}" x2="${x}" y2="${b}"/>` +
           // The whole line drags, but at 0.5 units of stroke it was a
           // hairline to aim at. These give it a real target: a narrow
           // band down the line itself, and a generous pad at each end
           // where the thumbs are and where the pointer goes first.
           //
           // The band is kept narrow on purpose. It sits over the data,
           // so every unit of width it takes is a block whose hover
           // tooltip it swallows; 13 units is about 1.5% of the plot.
           `<rect x="${x - 6.5}" y="${top}" width="13" height="${b - top}" fill="transparent"/>` +
           `<rect x="${x - 16}" y="${b - 6}" width="32" height="24" fill="transparent"/>` +
           `<rect x="${x - 16}" y="${top - 7}" width="32" height="14" fill="transparent"/>` +
           `<rect class="x-grip-thumb" x="${x - 1.75}" y="${top - 5}" width="3.5" height="10" rx="1.75"/>` +
           `<rect class="x-grip-thumb" x="${x - 1.75}" y="${b - 5}" width="3.5" height="10" rx="1.75"/>` +
           `<text x="${x}" y="${b + 17}" font-size="10" text-anchor="middle" pointer-events="none">${t.height}</text>` +
           `<title>Drag to give the blocks either side of ${t.height} more or less room</title></g>`;
    });
    return s;
  }

  function renderChart(chart, medianVal) {
    if (!chart.points.length) return "";
    const x0 = chart.pad_l;
    let s = "";
    s += `<line x1="${x0}" y1="${chart.plot_top}" x2="${x0}" y2="${chart.plot_bottom}" stroke="var(--rule)" stroke-width="1"/>`;
    s += `<line x1="${x0}" y1="${chart.plot_bottom}" x2="${chart.width}" y2="${chart.plot_bottom}" stroke="var(--rule)" stroke-width="1"/>`;
    chart.ticks.forEach(function (t) {
      s += `<line x1="${x0}" y1="${t.y}" x2="${chart.width}" y2="${t.y}" stroke="var(--rule-lt)" stroke-width="0.5" opacity="0.6"/>`;
      s += `<text x="4" y="${t.y + 3}" font-size="10" fill="var(--ink-dim)">${fmt0(t.value)}s${t.suffix || ""}</text>`;
    });
    s += renderAxis(chart);
    let prevX = xOf(chart, chart.points[0].idx);
    chart.points.forEach(function (p, i) {
      const x = xOf(chart, p.idx);
      if (i > 0) {
        const prev = chart.points[i - 1];
        const label = p.nick ? ", " + escapeHtml(p.nick) + " (" + escapeHtml(p.builder) + ")"
                     : (p.builder ? ", " + escapeHtml(p.builder) : "");
        const off = p.clipped ? " (off scale, clipped to the edge)" : "";
        s += `<line x1="${prevX}" y1="${prev.y}" x2="${x}" y2="${p.y}" stroke="${p.color}" stroke-width="1.75">` +
             `<title>Block ${p.height}: ${fmt1(p.seconds)}s${label}${off}</title></line>`;
      }
      prevX = x;
    });
    // Reference lines/labels last, on top of the data lines, see the
    // matching comment in the server-rendered SVG above.
    s += `<line x1="${x0}" y1="${chart.median_y}" x2="${chart.width}" y2="${chart.median_y}" stroke="var(--ink-dim)" stroke-width="1.25" stroke-dasharray="4,3"/>`;
    const close = chart.own_y !== null && Math.abs(chart.own_y - chart.median_y) < 14;
    const medianLabelY = close && chart.median_y > chart.own_y ? chart.median_y + 11 : chart.median_y - 4;
    const ownLabelY = close && chart.own_y >= chart.median_y ? chart.own_y + 11 : chart.own_y - 4;
    s += `<text x="${chart.width - 4}" y="${medianLabelY}" font-size="10" font-weight="600" fill="var(--ink-dim)" text-anchor="end" paint-order="stroke" stroke="var(--paper)" stroke-width="3">window median ${fmt0(medianVal)}s</text>`;
    if (chart.own_y !== null) {
      s += `<line x1="${x0}" y1="${chart.own_y}" x2="${chart.width}" y2="${chart.own_y}" stroke="var(--accent)" stroke-width="1.5" stroke-dasharray="5,4"/>`;
      s += `<text x="${chart.width - 4}" y="${ownLabelY}" font-size="10" font-weight="600" fill="var(--accent)" text-anchor="end" paint-order="stroke" stroke="var(--paper)" stroke-width="3">self median${chart.own_clipped ? " (off scale)" : ""}</text>`;
    }
    return s;
  }

  function paint(chart, medianVal) {
    lastChart = chart; lastMedian = medianVal;
    if (!grips || grips.length !== (chart.x_ticks || []).length) {
      grips = loadGrips(chart);
    }
    const svg = document.getElementById("odds-svg");
    if (svg) {
      // The chart is drawn at the size it is shown, so the box follows it.
      svg.setAttribute("viewBox", "0 0 " + chart.width + " " + chart.height);
      svg.setAttribute("height", chart.height);
      svg.innerHTML = renderChart(chart, medianVal);
    }
    const reset = document.getElementById("odds-zoom-reset");
    if (reset) reset.style.display = (draggable(chart) && !isDefault(chart)) ? "" : "none";
  }

  const svgEl = document.getElementById("odds-svg");
  if (svgEl) {
    svgEl.addEventListener("pointerdown", function (ev) {
      const g = ev.target.closest ? ev.target.closest("[data-grip]") : null;
      if (!g || !lastChart) return;
      dragging = parseInt(g.getAttribute("data-grip"), 10);
      // Captured on the svg, not the grip: every pointermove repaints and
      // throws the grip element away, so capture has to sit on something
      // that survives the repaint.
      svgEl.setPointerCapture(ev.pointerId);
      ev.preventDefault();
      paint(lastChart, lastMedian);  // show the held state before any move
    });
    svgEl.addEventListener("pointermove", function (ev) {
      if (dragging < 0 || !lastChart) return;
      const rect = svgEl.getBoundingClientRect();
      const scale = rect.width / lastChart.width;  // viewBox units per CSS px
      const frac = ((ev.clientX - rect.left) / scale - lastChart.pad_l) / lastChart.plot_w;
      const lo = grips[dragging - 1] + MIN_GAP;
      const hi = grips[dragging + 1] - MIN_GAP;
      grips[dragging] = Math.min(Math.max(frac, lo), hi);
      paint(lastChart, lastMedian);
    });
    function endDrag() {
      if (dragging < 0) return;
      dragging = -1;
      if (lastChart) { saveGrips(lastChart); paint(lastChart, lastMedian); }
    }
    svgEl.addEventListener("pointerup", endDrag);
    svgEl.addEventListener("pointercancel", endDrag);
  }

  const resetEl = document.getElementById("odds-zoom-reset");
  if (resetEl) {
    resetEl.addEventListener("click", function () {
      if (!lastChart) return;
      grips = defaultGrips(lastChart);
      saveGrips(lastChart);
      paint(lastChart, lastMedian);
    });
  }

  function renderLegend(legend) {
    if (!legend || !legend.length) return "";
    return legend.map(function (entry) {
      let name = "Other";
      if (entry.label) {
        name = entry.nick ? escapeHtml(entry.nick)
                          : escapeHtml(entry.label.slice(0, 10)) + "&hellip;";
      }
      const who = entry.label ? escapeHtml(entry.nick || "Builder") : "All other builders";
      const rows = (entry.machines || []).map(function (m) {
        return `<span class="lg-row"><span>${escapeHtml(m.name)}</span>` +
               `<span>${m.blocks}</span><span>${Math.round(m.pace)}s</span></span>`;
      }).join("");
      const head = rows ? `<span class="lg-head"><span>Machine, fastest first</span><span>Blocks</span><span>Median</span></span>` : "";
      return `<span class="lg" tabindex="0"><span class="lg-dot" style="background:${entry.color}"></span>` +
             `<span class="lg-name${entry.label && !entry.nick ? " hash-short" : ""}">${name}</span>` +
             `<span class="n">(${entry.count})</span>` +
             `<span class="lg-pop" role="tooltip"><span class="lg-who">${who}</span>` +
             (entry.label ? `<span class="lg-addr">${escapeHtml(entry.label)}</span>` : "") +
             `<span class="lg-sub">${entry.count} of ${entry.total} blocks</span>${head}${rows}</span></span>`;
    }).join("");
  }

  // Tile subtitles are clipped to one line with an ellipsis, so mirror the
  // full text into a hover title.
  function titleStatSubs() {
    document.querySelectorAll(".stat .stat-sub").forEach(el => {
      el.title = el.textContent.trim();
    });
  }

  // Ask for a chart drawn at the size it is shown: the container width and
  // whatever height is left in the window below it, so the chart fills the
  // page instead of sitting at a fixed size.
  function chartDims() {
    const wrap = document.querySelector(".chart-wrap");
    if (!wrap) return "";
    const r = wrap.getBoundingClientRect();
    const top = r.top + window.scrollY;
    const w = Math.max(Math.round(r.width), 560);
    const h = Math.round(window.innerHeight - top - 74);
    return "?w=" + w + "&h=" + Math.max(190, Math.min(h, 560));
  }

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

      if (data.waiting_zero_odds) {
        document.getElementById("odds-pct-val").textContent = "Not mining";
        document.getElementById("odds-pct-sub").textContent =
          "odds are at or below your minimum, watching before building";
      } else {
        document.getElementById("odds-pct-val").textContent =
          data.odds_pct !== null ? ((data.own_is_estimate && !data.own_pace_measured) ? "~" : "") + fmt1(data.odds_pct) + "%" : "--";
        const win = data.draw_window + "s draw window";
        document.getElementById("odds-pct-sub").textContent =
          data.odds_pct === null ? "no blocks to judge from yet"
            : (data.own_is_estimate && !data.own_pace_measured) ? "estimate: our pace is not measured yet"
            : data.odds_pct === 0 ? "never inside the " + win
            : data.in_draw_pct < 95
                ? "in the " + win + " on " + Math.round(data.in_draw_pct) + "% of heights"
            : data.entrants < 1.05 ? "only builder inside the " + win
            : fmt1(data.entrants) + " builders inside the " + win;
      }
      document.getElementById("odds-tile").title = data.own_pace === null ? "" :
        "Your pace " + fmt1(data.own_pace) + "s, " +
        (data.own_pace_measured ? "from your own blocks"
          : (data.own_is_estimate ? "estimated from calibration" : "your VDF clock")) +
        ". Fastest other builder " +
        (data.field_fastest === null ? "none in this window" : fmt1(data.field_fastest) + "s") +
        ". Draw window " + data.draw_window + "s.";
      document.getElementById("win-share-val").textContent =
        data.win_share_pct !== null ? fmt1(data.win_share_pct) + "%" : "--";
      document.getElementById("win-share-sub").textContent =
        data.own_blocks + " of the last " + data.window_len;
      document.getElementById("own-median-val").textContent =
        data.own_pace !== null ? fmt1(data.own_pace) + "s" : "--";
      document.getElementById("own-median-sub").textContent =
        data.own_pace_measured ? "median interval of blocks we built"
          : (data.own_is_estimate ? "estimated from calibration, no build finished yet"
                                  : "VDF clock: no block of ours in this window");
      document.getElementById("window-median-val").textContent = fmt1(data.median) + "s";
      document.getElementById("window-count").textContent = data.window_len + " blocks";

      const r = data.reorgs || {deepest: 0, count: 0};
      document.getElementById("reorg-deepest").textContent = r.deepest || "none";
      document.getElementById("reorg-count").textContent = r.count
        ? r.count + " in 30 days, ties not counted"
        : "none deeper than a tie, 30 days";
      titleStatSubs();

      // A drag in progress owns the chart until it is released, so a
      // refresh landing mid-drag doesn't yank the grip out from under it.
      if (dragging < 0) paint(data.chart, data.median);

      const legendEl = document.getElementById("odds-legend");
      if (legendEl) legendEl.innerHTML = renderLegend(data.chart.legend);
    } catch (e) { /* keep last good render on a transient failure */ }
  }

  // Paint once from what the server already embedded, so a saved spacing
  // is applied immediately rather than after the first fetch comes back.
  try {
    const seed = document.getElementById("odds-initial");
    titleStatSubs();
    if (seed) { const d = JSON.parse(seed.textContent); paint(d.chart, d.median); }
  } catch (e) { /* the fetch below covers it */ }
  refresh();
  setInterval(refresh, 6000);
  let resizeTimer = null;
  window.addEventListener("resize", function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(refresh, 250);
  });
})();
</script>
</div>
{% endif %}
{% endblock %}