{% extends "base.html" %}
{% block content %}
<p style="margin:.2rem 0 .6rem; font-size:.78rem; color:var(--muted); line-height:1.5">
  Public, permanent, on-chain. Posting burns {{ BOARD_POST_AMOUNT }} tick,
  plus a separate network fee, currently {{ board_fee_floor }}+ ticks and rising
  as the board fills up or with congestion. Voting is an ordinary transaction
  (still burns {{ BOARD_POST_AMOUNT }} tick) and never raises that floor.
  Icon and nickname ride along on a post you were already sending, never a
  post of their own.
</p>

<div id="board-feed" data-csrf="{{ csrf_token }}" data-burn="{{ BOARD_POST_AMOUNT }}">
    {% if rows %}
      {% for row in rows %}
      {% set mine = row.tx.from == own_addr %}
      {% set score = row.up - row.down %}
      <div class="rc-root {{ 'mine' if mine }} {{ 'pending' if row.pending }}" id="post-{{ row.ref6 }}">
        <div class="rc-info">
          <span class="rc-avatar" aria-hidden="true">{{ row.icon }}</span>
          <a href="/address?addr={{ row.tx.from }}" class="rc-username {{ 'hash-short' if not row.nick }}"
             title="{{ row.tx.from }}{{ ' - nickname: ' + row.nick if row.nick else ' - no nickname set' }}">{{ row.nick or row.tx.from }}</a>
          {% if row.pending %}
            <span class="rc-time" title="Submitted, not yet in a block">pending&hellip;</span>
          {% else %}
            <a class="rc-time" href="/explorer/tx/{{ row.hash }}" data-ts="{{ row.ts | int if row.ts else 0 }}" title="block {{ row.height }}, verify on the explorer">&nbsp;</a>
          {% endif %}
          {# Vote widget: markup/CSS/icon ported from Remark42's own
             CommentVotes component (comment-votes.tsx/.module.css,
             icons/arrow.tsx), full identity intact -- same class names,
             same color tokens (var(--colorN)), same disabled/active
             states once already voted, not a fresh rebuild. #}
          <span class="rc-vote-root">
            {% if is_private %}
            <button type="button" class="rc-voteButton rc-downVoteButton {{ 'rc-downVoteButtonActive' if row.my_vote == 'down' }}"
                    data-ref="{{ row.ref6 }}" data-dir="-" title="Vote down"
                    {{ 'disabled' if row.my_vote == 'down' }}>
              <svg class="rc-voteIcon" width="12" height="12" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 11.5L14.5 19L22 11" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            {% endif %}
            <span class="rc-votes {{ 'rc-votesPositive' if score > 0 else ('rc-votesNegative' if score < 0 else '') }} {{ 'rc-votesPending' if row.vote_pending }}"
                  title="{{ 'Includes a vote not yet in a block' if row.vote_pending else 'Votes score' }}">{{ score }}{{ '…' if row.vote_pending }}</span>
            {% if is_private %}
            <button type="button" class="rc-voteButton rc-upVoteButton rc-upVoteIcon {{ 'rc-upVoteButtonActive' if row.my_vote == 'up' }}"
                    data-ref="{{ row.ref6 }}" data-dir="+" title="Vote up"
                    {{ 'disabled' if row.my_vote == 'up' }}>
              <svg class="rc-voteIcon" width="12" height="12" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 11.5L14.5 19L22 11" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            {% endif %}
          </span>
        </div>
        <div class="rc-body">
          {% if row.reply_ref %}
          <a class="rc-replyQuote" href="#post-{{ row.reply_ref }}">
            {% if row.reply_from %}replying to {{ row.reply_from[:14] }}&hellip;: &ldquo;{{ row.reply_snippet }}&rdquo;
            {% else %}replying to an earlier post{% endif %}
          </a>
          {% endif %}
          <div class="rc-text">{{ render_board_text(row.text) }}</div>
          {% if is_private and not row.pending %}
          <button type="button" class="rc-replyBtn"
                  data-ref="{{ row.ref6 }}" data-addr="{{ row.tx.from }}"
                  data-snippet="{{ row.text[:60] }}">Reply</button>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    {% else %}
      <p style="color:var(--muted);text-align:center">Nothing posted yet.</p>
    {% endif %}
    {% if is_private %}
    <form method="POST" action="/board?page={{ page }}" class="board-compose" id="board-compose"
          data-own-nick="{{ own_nick or '' }}" data-own-icon-idx="{{ own_icon_idx }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="passphrase" id="board-passphrase">
      <input type="hidden" name="profile_changed" id="board-profile-changed" value="">
      <input type="hidden" name="icon" id="board-icon-value" value="{{ own_icon_idx }}">
      <input type="hidden" name="reply_ref" id="board-reply-ref" value="">
      {% if compose_err %}<div class="alert alert-err" style="margin:0 0 .4rem">{{ compose_err }}</div>{% endif %}

      <div class="board-compose-row board-reply-banner" id="board-reply-banner" hidden>
        <span id="board-reply-text"></span>
        <button type="button" id="board-reply-cancel" title="Cancel reply">&times;</button>
      </div>

      <div class="board-compose-row board-profile-row">
        <button type="button" id="board-icon-btn" class="board-icon-btn" title="Change icon (folds into your next post)">{{ own_icon }}</button>
        <input type="text" name="nick" id="board-nick" maxlength="16" placeholder="nickname (optional)"
               value="{{ own_nick or '' }}" autocomplete="off" style="width:8rem">
        <span class="stat-sub" id="board-profile-note" style="margin:0"></span>
      </div>
      <div class="board-icon-palette" id="board-icon-palette" hidden>
        {% for ic in icon_palette %}
        <button type="button" class="board-icon-choice" data-idx="{{ loop.index0 }}">{{ ic }}</button>
        {% endfor %}
      </div>

      {# Toolbar ported unmodified from GitHub's own markdown-toolbar-element
         (github/markdown-toolbar-element, MIT -- see vendor/README.md),
         the exact same custom element Remark42's own compose box wires up
         to its textarea. Header/list/image are still left out: this
         board's own render_board_text has no support for those, so a
         button for markdown this page can't render would be wiring a
         lie. Bold, italic, code, quote and link all now have a matching
         render_board_text rule (see api.py), so all five get a button. #}
      <markdown-toolbar for="board-message" class="rc-toolbar" id="board-toolbar">
        <div class="rc-toolbar-group">
          <md-bold class="rc-toolbar-item" title="Bold"><svg viewBox="0 0 10 16" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1 2h3.83c2.48 0 4.3.75 4.3 2.95 0 1.14-.63 2.23-1.67 2.61v.06c1.33.3 2.3 1.23 2.3 2.86 0 2.39-1.97 3.52-4.61 3.52H1V2zm3.66 4.95c1.67 0 2.38-.66 2.38-1.69 0-1.17-.78-1.61-2.34-1.61H3.13v3.3h1.53zm.27 5.39c1.77 0 2.75-.64 2.75-1.98 0-1.27-.95-1.81-2.75-1.81h-1.8v3.8h1.8v-.01z"/></svg></md-bold>
          <md-italic class="rc-toolbar-item" title="Italic"><svg viewBox="0 0 6 16" width="6" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.81 5h1.98L3 14H1l1.81-9zm.36-2.7c0-.7.58-1.3 1.33-1.3.56 0 1.13.38 1.13 1.03 0 .75-.59 1.3-1.33 1.3-.58 0-1.13-.38-1.13-1.03z"/></svg></md-italic>
        </div>
        <div class="rc-toolbar-group">
          <md-quote class="rc-toolbar-item" title="Quote"><svg viewBox="0 0 14 16" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.16 3.5C3.73 5.06 2.55 6.67 2.55 9.36c.16-.05.3-.05.44-.05 1.27 0 2.5.86 2.5 2.41 0 1.61-1.03 2.61-2.5 2.61-1.9 0-2.99-1.52-2.99-4.25 0-3.8 1.75-6.53 5.02-8.42L6.16 3.5zm7 0c-2.43 1.56-3.61 3.17-3.61 5.86.16-.05.3-.05.44-.05 1.27 0 2.5.86 2.5 2.41 0 1.61-1.03 2.61-2.5 2.61-1.89 0-2.98-1.52-2.98-4.25 0-3.8 1.75-6.53 5.02-8.42l1.14 1.84h-.01z"/></svg></md-quote>
          <md-code class="rc-toolbar-item" title="Code"><svg viewBox="0 0 14 16" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg></md-code>
          <md-link class="rc-toolbar-item" title="Link"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></md-link>
        </div>
      </markdown-toolbar>
      <div class="rc-text" id="board-preview" hidden></div>
      <div class="board-compose-row">
        <textarea name="message" id="board-message" rows="1"
               placeholder="Say something" autocomplete="off" style="flex:1">{{ message_value }}</textarea>
        <button type="button" id="board-preview-btn">Preview</button>
        <button type="submit" id="board-send">Send</button>
      </div>
      <div class="board-compose-row board-compose-sub">
        <span class="stat-sub" id="board-fee-live" style="margin:0" title="Set automatically to whatever clears the next block, never more, plus the {{ BOARD_POST_AMOUNT }}-tick burn. Updates as you type since a longer post (and any icon/nickname/reply riding along) costs more.">
          fee: {{ board_fee_floor }}+ ticks
        </span>
        <span class="stat-sub" id="board-msg-counter" style="margin:0"></span>
      </div>
    </form>
    <script type="module" src="/vendor/markdown-toolbar-element.js"></script>
    {% endif %}
</div>

{% if total_pages > 1 %}
<nav class="pager" aria-label="Pagination">
  {% if has_prev %}<a href="/board?page={{ page - 1 }}">Prev</a>{% endif %}
  {% for p in page_window %}
    {% if p is none %}<span class="pager-ellipsis">&hellip;</span>
    {% elif p == page %}<span class="pager-current">{{ p }}</span>
    {% else %}<a href="/board?page={{ p }}">{{ p }}</a>
    {% endif %}
  {% endfor %}
  {% if has_next %}<a href="/board?page={{ page + 1 }}">Next</a>{% endif %}
</nav>
{% endif %}

<style>
  /* Remark42's structure/markup/spacing stays exactly as ported; only
     the color VALUES behind its own token names are remapped here, onto
     this site's existing palette (base.html's --paper/--ink/--accent/
     --muted/--gain/--loss/--rule-lt), so the board reads as part of this
     site rather than a foreign widget dropped into it. Same variable
     names as before so nothing else in this file needs to change. */
  #board-feed, .board-compose {
    --color5: var(--rule-lt); --color6: var(--paper); --color9: var(--accent);
    --color10: var(--muted); --color11: var(--muted); --color13: var(--muted);
    --color15: var(--accent); --color16: var(--rule-lt); --color33: var(--ink-dim);
    --color37: var(--muted); --color12: 47, 92, 51; --color30: 122, 34, 34;
    --primary-text-color: 28, 26, 20; --primary-background-color: 246, 243, 234;
  }
  /* This site's global `button`/`input`/`textarea` rules (base.html) give
     every button a bold filled site-chrome look and every input a
     monospace/white-box look -- exactly wrong for Remark42's own mostly
     unstyled, ghost-button components. Reset to Remark42's own
     global.css defaults first; the specific .rc- and .board- prefixed rules
     below then apply Remark42's OWN button/input styling on top of that,
     never this site's. :where(#board-feed) rather than a bare #board-feed:
     an ID plus a tag (#board-feed button) outranks a lone ID or class
     selector (#board-send, .board-icon-btn), so a plain reset here would
     silently beat the very overrides it exists to make room for --
     :where() scopes it to this page without adding any specificity of
     its own, so it only ever wins when nothing more specific says otherwise. */
  :where(#board-feed) button {
    background: none; border: 0; padding: 0; margin: 0; font: inherit;
    color: inherit; font-weight: normal; cursor: pointer;
  }
  :where(#board-feed) button:disabled { opacity: .6; cursor: default; }
  :where(#board-feed) input, :where(#board-feed) textarea {
    font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0;
  }
  :where(#board-feed) a { color: var(--color9); text-decoration: none; }
  :where(#board-feed) a:hover { color: var(--color33); }

  /* Container: Remark42's own background/text color/type, not this
     site's paper/ink serif -- this is the actual "full identity" part,
     not just the components inside it. */
  #board-feed {
    background: rgb(var(--primary-background-color)); color: rgb(var(--primary-text-color));
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px; display: flex; flex-direction: column; padding: .5rem;
    border: 1px solid var(--color16); border-radius: 4px;
  }
  /* Elements meant to be hidden by the `hidden` attribute must actually
     stay hidden: a bare class selector below (e.g. `.board-icon-palette
     { display: flex }`) has higher specificity than the browser's own
     `[hidden] { display: none }` rule, so without this override picking
     "icon" or "reply" would have shown a permanently-open panel instead
     of a toggled one. */
  #board-feed [hidden] { display: none !important; }

  /* Row layout (.rc-root/.rc-info/.rc-body/.rc-avatar/.rc-username/.rc-time/
     .rc-text), the vote widget (.rc-vote-root/.rc-voteButton/.rc-votes and
     friends) and the compose toolbar (.rc-toolbar*) are ported from
     Remark42's own comment.module.css, comment-votes.module.css and
     markdown-toolbar.module.css (github.com/umputun/remark42, MIT):
     same class shape, same property values, same color tokens, "rc-"
     prefixed only to stay out of this project's own class namespace.
     A chat bubble is gone in favor of this thin-header-line-plus-full-width-
     text shape because the board is a flat public feed, not a two-party
     conversation -- the bubble mostly bought wasted margin, not clarity. */
  .rc-root { display: block; padding: 12px 0 8px; font-size: 16px; line-height: 1.4; border-bottom: 1px solid var(--color16); }
  .rc-root.mine { background: rgba(179,90,12,.05); }
  .rc-root.pending { opacity: .6; }
  .rc-info { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 6px; font-size: 14px; position: relative; }
  .rc-avatar { width: 20px; margin-right: 6px; font-size: 1.1rem; line-height: 1; }
  .rc-username { font-weight: 700; vertical-align: middle; text-decoration: none; color: var(--color10); }
  .rc-username:hover { opacity: .75; }
  .rc-username.hash-short { font-family: var(--mono); font-weight: 400; word-break: break-word; overflow-wrap: anywhere; }
  .rc-time { margin-left: auto; font-size: .68rem; color: var(--color11); text-decoration: none; }
  .rc-time:hover { color: var(--color10); text-decoration: underline; }
  .rc-body { padding-left: 26px; }
  .rc-replyQuote {
    display: block; font-size: .75rem; color: var(--color11); text-decoration: none;
    margin: .15rem 0; padding-left: .5rem; border-left: 2px solid var(--color16);
  }
  .rc-replyQuote:hover { color: var(--color9); }
  .rc-text { white-space: pre-wrap; word-break: break-word; margin-bottom: 4px; }
  .rc-text blockquote { margin: .3rem 0; padding: .2rem .2rem .2rem .6rem; border-left: 2px solid var(--rule-lt); }
  .rc-text code { font-family: var(--mono); background: var(--rule-lt); padding: .05rem .3rem; border-radius: 3px; }
  .rc-replyBtn {
    font-size: .75rem; font-weight: 600; color: var(--color9); text-decoration: none;
  }
  .rc-replyBtn:hover { color: var(--color33); }

  .rc-vote-root { display: flex; align-items: center; margin-left: .5rem; font-weight: 700; line-height: 16px; user-select: none; }
  .rc-voteButton { display: flex; align-items: center; padding: 2px; opacity: .4; color: var(--color13); transition: opacity .15s, color .15s; }
  .rc-voteButton:disabled { cursor: default; }
  .rc-root:hover .rc-voteButton { opacity: 1; }
  .rc-upVoteButton:hover, .rc-upVoteButtonActive { color: rgb(var(--color12)); opacity: 1; }
  .rc-downVoteButton:hover, .rc-downVoteButtonActive { color: rgb(var(--color30)); opacity: 1; }
  .rc-votes { margin: 0 4px; padding: 2px 6px; font-weight: 700; border-radius: 3px; min-width: 16px; text-align: center; color: var(--color11); }
  .rc-votesNegative { color: rgb(var(--color30)); background-color: rgba(var(--color30), .1); }
  .rc-votesPositive { color: rgb(var(--color12)); background-color: rgba(var(--color12), .1); }
  .rc-votesPending { opacity: .6; border: 1px dashed currentColor; }
  .rc-upVoteIcon .rc-voteIcon { transform: rotate(180deg); }

  .rc-toolbar { display: block; text-align: right; margin-bottom: .25rem; }
  .rc-toolbar-group { display: inline-block; }
  .rc-toolbar-item {
    color: var(--color37); display: inline-flex;
    height: 24px; width: 24px; justify-content: center; align-items: center;
  }
  .rc-toolbar-item:hover { color: var(--color9); }
  .rc-toolbar-item svg { fill: currentColor; }

  /* Compose box: Remark42's own comment-form.root shape (light gray
     border, no filled card background) instead of this site's tan/paper
     card, per the same "container gets the real identity too" fix as
     #board-feed above. */
  .board-compose {
    border: 6px solid var(--color5); border-radius: 2px; padding: 8px; margin-top: .5rem;
  }
  .board-compose-row { display: flex; gap: .5rem; align-items: center; }
  .board-compose-row + .board-compose-row { margin-top: .4rem; }
  .board-compose-sub { font-size: .82rem; color: var(--color11); }
  #board-message {
    width: 100%; padding: 10px 12px; font-size: 16px; line-height: 1.4;
    resize: none; overflow: hidden; max-height: 8rem; overflow-y: auto;
  }
  /* Remark42's own primary-button look (kindPrimary/sizeMiddle in its
     button.module.css): filled teal, not this site's bold dark-ink
     button chrome. */
  #board-send {
    flex: 0 0 auto; height: 2rem; padding: 0 12px; border-radius: 4px;
    background: var(--color15); color: var(--color6); font-weight: 600;
  }
  #board-send:hover:not(:disabled) { background: var(--color33); }
  /* Remark42's own kindSecondary button look, for the same "Preview"
     button next to Send its own compose box has. */
  #board-preview-btn {
    flex: 0 0 auto; height: 2rem; padding: 0 12px; border-radius: 4px;
    background: var(--color6);
  }
  #board-preview-btn:hover { box-shadow: inset 0 0 0 2px var(--color33); }
  #board-preview { min-height: 2rem; padding: .35rem .5rem; }
  .board-icon-btn { font-size: 1.2rem; line-height: 1; padding: .1rem .3rem; border-radius: 4px; }
  .board-icon-btn:hover { background: var(--color5); }
  #board-nick { border-bottom: 1px solid var(--color16); padding: .2rem 0; }
  .board-icon-palette {
    display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .3rem;
    padding: .3rem; border: 1px solid var(--color16); border-radius: 4px;
  }
  .board-icon-choice { font-size: 1.1rem; padding: .1rem .25rem; border-radius: 4px; }
  .board-icon-choice:hover { background: var(--color5); }
  .board-reply-banner {
    justify-content: space-between; font-size: .78rem; color: var(--color11);
    background: var(--color5); border-radius: 4px; padding: .25rem .4rem;
  }
  #board-reply-cancel { color: var(--color11); }
</style>
<script>
(function () {
  const PAGE = {{ page }};
  const TAG_LEN = {{ tag_len }};
  const MAX_MEMO_BYTES = {{ MAX_MEMO_BYTES }};

  function fmtTs(ts) {
    if (!ts) return "";
    const diff = Math.floor(Date.now() / 1000 - ts);
    if (diff < 5) return "just now";
    if (diff < 60) return diff + "s ago";
    if (diff < 3600) return Math.floor(diff / 60) + "m ago";
    if (diff < 86400) return Math.floor(diff / 3600) + "h ago";
    if (diff < 2592000) return Math.floor(diff / 86400) + "d ago";
    return new Date(ts * 1000).toLocaleDateString();
  }

  document.querySelectorAll(".rc-time[data-ts]").forEach(el => {
    const ts = parseInt(el.dataset.ts, 10);
    if (ts) el.textContent = fmtTs(ts);
  });

  // Same "ask right before signing" trick used by every form on this page
  // that moves coins: nothing sits in a visible passphrase field between
  // load and click.
  function wirePassphrasePrompt(form, passInput) {
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const passphrase = window.prompt("Passphrase:");
      if (passphrase === null) return;  // cancelled, nothing sent
      passInput.value = passphrase;
      HTMLFormElement.prototype.submit.call(form);  // bypasses this same listener
    });
  }

  // A vote spends real coins (the same 1-tick burn a post makes, plus a
  // congestion fee), so it gets the exact cost quoted right in the same
  // prompt that asks for the passphrase, not just a bare "Passphrase:"
  // like a free action would get.
  const feedEl = document.getElementById("board-feed");
  const CSRF = feedEl ? feedEl.dataset.csrf : "";
  const BURN = feedEl ? feedEl.dataset.burn : "0";

  async function handleVoteClick(btn) {
    // Disabled for the whole round trip, not just while the request is
    // in flight: the fee lookup and the passphrase prompt both take real
    // time a second click could land inside, and a vote is a paid
    // transaction, not a toggle -- two overlapping submissions is two
    // paid votes, not one.
    if (btn.disabled) return;
    btn.disabled = true;
    try {
      const ref = btn.dataset.ref;
      const dir = btn.dataset.dir;
      let fee = null;
      try {
        const res = await fetch(`/api/board/vote_fee?ref=${encodeURIComponent(ref)}&dir=${encodeURIComponent(dir)}`, {cache: "no-store"});
        const data = await res.json();
        if (!data.ok) { window.alert(data.reason || "Can't vote."); return; }
        fee = data.fee;
      } catch (e) {
        // Fee lookup failed; still lets the vote through with a generic
        // prompt rather than blocking on a courtesy estimate.
      }
      const label = fee !== null
        ? `This vote burns ${BURN} tick + ~${fee} tick fee (real coins). Passphrase:`
        : "Passphrase:";
      const passphrase = window.prompt(label);
      if (passphrase === null) return;  // cancelled, nothing sent
      const body = new URLSearchParams({csrf_token: CSRF, ref, dir, passphrase});
      await fetch(`/board/vote?page=${PAGE}`, {method: "POST", body});
      location.reload();  // same "post is its own confirmation" pattern as composing
    } finally {
      btn.disabled = false;
    }
  }
  document.querySelectorAll(".rc-voteButton[data-ref]").forEach(btn => {
    btn.addEventListener("click", () => handleVoteClick(btn));
  });

  const composeForm = document.getElementById("board-compose");
  if (composeForm) {
    wirePassphrasePrompt(composeForm, document.getElementById("board-passphrase"));

    const ownNick    = composeForm.dataset.ownNick || "";
    const ownIconIdx = parseInt(composeForm.dataset.ownIconIdx, 10) || 0;

    const msgInput      = document.getElementById("board-message");
    const nickInput     = document.getElementById("board-nick");
    const iconBtn       = document.getElementById("board-icon-btn");
    const iconPalette   = document.getElementById("board-icon-palette");
    const iconValue     = document.getElementById("board-icon-value");
    const profileChanged = document.getElementById("board-profile-changed");
    const profileNote   = document.getElementById("board-profile-note");
    const replyRefInput = document.getElementById("board-reply-ref");
    const replyBanner   = document.getElementById("board-reply-banner");
    const replyText     = document.getElementById("board-reply-text");
    const replyCancel   = document.getElementById("board-reply-cancel");
    const counter        = document.getElementById("board-msg-counter");
    const sendBtn         = document.getElementById("board-send");
    const feeEl           = document.getElementById("board-fee-live");
    const previewBtn      = document.getElementById("board-preview-btn");
    const previewEl       = document.getElementById("board-preview");
    const toolbarEl       = document.getElementById("board-toolbar");
    let feeTimer = null;
    let feeSeq = 0;

    // Renders through the server's own render_board_text (see
    // /api/board/preview in api.py) rather than a second, client-side
    // reimplementation of the same regex subset: two copies of "what
    // markdown does this board support" would eventually drift apart,
    // and Preview showing something the real post then renders
    // differently would be worse than not having Preview at all.
    previewBtn.addEventListener("click", async () => {
      const previewing = !previewEl.hidden;
      if (previewing) {
        previewEl.hidden = true;
        msgInput.hidden = false;
        toolbarEl.hidden = false;
        previewBtn.textContent = "Preview";
        return;
      }
      try {
        const body = new URLSearchParams({text: msgInput.value});
        const res = await fetch("/api/board/preview", {method: "POST", body});
        const data = await res.json();
        previewEl.innerHTML = data.html || "<em>Nothing to preview.</em>";
      } catch (e) {
        previewEl.textContent = "Preview failed to load.";
      }
      previewEl.hidden = false;
      msgInput.hidden = true;
      toolbarEl.hidden = true;
      previewBtn.textContent = "Edit";
    });

    function currentIconIdx() {
      return parseInt(iconValue.value, 10) || 0;
    }

    // Only the fields that actually differ from what's already on chain
    // for this address ride along -- an unchanged icon/nickname costs
    // nothing extra, exactly the point of folding this into a post
    // instead of giving it a post of its own.
    function markProfileDirty() {
      const dirty = currentIconIdx() !== ownIconIdx || nickInput.value.trim() !== ownNick;
      profileChanged.value = dirty ? "1" : "";
      profileNote.textContent = dirty ? "icon/nickname will update with this post" : "";
      refreshCounter();
    }

    iconBtn.addEventListener("click", () => {
      iconPalette.hidden = !iconPalette.hidden;
    });
    iconPalette.querySelectorAll(".board-icon-choice").forEach(btn => {
      btn.addEventListener("click", () => {
        iconValue.value = btn.dataset.idx;
        iconBtn.textContent = btn.textContent;
        iconPalette.hidden = true;
        markProfileDirty();
      });
    });
    nickInput.addEventListener("input", markProfileDirty);

    document.querySelectorAll(".rc-replyBtn").forEach(btn => {
      btn.addEventListener("click", () => {
        replyRefInput.value = btn.dataset.ref;
        replyText.textContent = "replying to " + btn.dataset.addr.slice(0, 14) + "…: “" + btn.dataset.snippet + "”";
        replyBanner.hidden = false;
        msgInput.focus();
        refreshCounter();
      });
    });
    replyCancel.addEventListener("click", () => {
      replyRefInput.value = "";
      replyBanner.hidden = true;
      refreshCounter();
    });

    // Mirrors build_board_body's header exactly (see api.py) so the byte
    // budget shown here is the real one, not an approximation.
    function cleanNick() {
      return nickInput.value.trim().slice(0, 16).replace(/]/g, "").replace(/\n/g, "");
    }

    function headerBytes() {
      let header = "";
      if (profileChanged.value) {
        header += "[p:" + currentIconIdx() + ":" + cleanNick() + "]";
      }
      if (replyRefInput.value) {
        header += "[r:" + replyRefInput.value + "]";
      }
      return new TextEncoder().encode(header).length;
    }

    function setSendState(disabled, reason) {
      if (!sendBtn) return;
      sendBtn.disabled = disabled;
      sendBtn.title = reason;
    }

    function refreshFee(bytes) {
      clearTimeout(feeTimer);
      feeTimer = setTimeout(async () => {
        const seq = ++feeSeq;
        try {
          const params = new URLSearchParams({bytes: String(bytes)});
          if (profileChanged.value) {
            params.set("icon", String(currentIconIdx()));
            params.set("nick", cleanNick());
          }
          if (replyRefInput.value) params.set("reply_ref", replyRefInput.value);
          const res = await fetch("/api/board/fee?" + params.toString(), {cache: "no-store"});
          if (!res.ok) throw new Error("bad status " + res.status);
          const data = await res.json();
          if (seq !== feeSeq) return;  // a newer keystroke already superseded this one
          feeEl.textContent = "fee: " + data.fee + " ticks";
          setSendState(!data.ok, data.reason || "");
        } catch (e) {
          // Quiet failure: the floor shown at page load is still a safe
          // (if stale) lower bound, not a broken page.
        }
      }, 200);
    }

    function refreshCounter() {
      const maxBytes = MAX_MEMO_BYTES - TAG_LEN - headerBytes();
      const bytes = new TextEncoder().encode(msgInput.value).length;
      const empty = msgInput.value.trim() === "";
      const over = bytes > maxBytes;
      counter.textContent = bytes + " / " + maxBytes;
      counter.style.color = over ? "var(--red, #c0392b)" : "var(--muted)";
      if (empty) {
        setSendState(true, "Write something to post.");
      } else if (over) {
        const excess = bytes - maxBytes;
        setSendState(true, excess + " byte" + (excess !== 1 ? "s" : "") + " too long.");
      } else {
        setSendState(false, "");  // provisional; refreshFee may re-disable for balance
        refreshFee(bytes);
      }
    }
    // Grows with content instead of scrolling internally, the same
    // behaviour Remark42's own compose box gets from its text-expander
    // element -- a plain textarea has no auto-resize of its own.
    function autoGrow() {
      msgInput.style.height = "auto";
      msgInput.style.height = msgInput.scrollHeight + "px";
    }
    msgInput.addEventListener("input", () => { refreshCounter(); autoGrow(); });
    refreshCounter();
    autoGrow();
  }

  // Only page 1 polls for new posts landing; older pages are history,
  // not a live view, so they stay exactly what was rendered.
  if (PAGE !== 1) return;

  let knownFirstHash = null;
  const statusEl = document.getElementById("live-status");

  async function poll() {
    try {
      const res = await fetch("/api/board?page=1", {cache: "no-store"});
      if (!res.ok) throw new Error("bad status " + res.status);
      const data = await res.json();
      const latest = data.posts[0] && data.posts[0].hash;
      if (knownFirstHash === null) {
        knownFirstHash = latest || "";
      } else if (latest && latest !== knownFirstHash) {
        statusEl.textContent = "new posts – reload to see them";
      }
    } catch (e) {
      // Quiet failure: this is a courtesy nudge, not a required feature.
    }
  }

  poll();
  setInterval(poll, 15000);
})();
</script>
{% endblock %}