{% extends "base.html" %}
{% block content %}
<div id="board-feed" data-csrf="{{ csrf_token }}" data-burn="{{ BOARD_POST_AMOUNT }}">
    {% 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="form_token" value="{{ form_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="">
      <input type="hidden" name="edit_ref" id="board-edit-ref" value="">
      <input type="hidden" name="edit_orig" id="board-edit-orig" value="">
      <div class="board-error" id="board-compose-error" role="alert"{% if not compose_err %} hidden{% endif %}>{{ compose_err }}</div>

      <div class="board-compose-row board-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-banner" id="board-edit-banner" hidden>
        <span>editing your post: only what you change is sent</span>
        <button type="button" id="board-edit-cancel" title="Cancel edit">&times;</button>
      </div>

      <div class="rc-text" id="board-preview" hidden></div>
      <div class="board-compose-row board-main">
        <button type="button" id="board-icon-btn" class="board-icon-btn" title="Your icon and nickname (they ride along with your next post)">{{ own_icon }}</button>
        <textarea name="message" id="board-message" rows="1"
               placeholder="Say something" autocomplete="off">{{ message_value }}</textarea>
        <button type="submit" id="board-send">Send</button>
      </div>
      <div class="board-compose-row board-compose-sub">
        <span id="board-fee-live" 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 }}+</span>
        <span id="board-msg-counter"></span>
        <button type="button" id="board-preview-btn" class="board-link">Preview</button>
        <span id="board-sent" hidden>sent</span>
      <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>

      <div class="board-profile-panel" id="board-profile-panel" hidden>
        <input type="text" name="nick" id="board-nick" maxlength="16" placeholder="nickname (optional)"
               value="{{ own_nick or '' }}" autocomplete="off">
        <span id="board-profile-note"></span>
        <div class="board-icon-palette" id="board-icon-palette">
          {% for ic in icon_palette %}
          <button type="button" class="board-icon-choice" data-idx="{{ loop.index0 }}">{{ ic }}</button>
          {% endfor %}
        </div>
      </div>
    </form>
    <script type="module" src="/vendor/markdown-toolbar-element.js"></script>
    {% endif %}
    <div id="board-rows">
      {% include "board_rows.html" %}
    </div>
</div>



<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: .1rem 0;
  }
  /* 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 color tokens, "rc-" prefixed only to stay out of
     this project's own class namespace, and spaced much tighter than there:
     a flat public feed wants to show many posts, not a few roomy ones. */
  .rc-root { display: block; padding: 5px 0 4px; font-size: 15px; line-height: 1.3; border-bottom: 1px solid var(--color16); }
  /* Indent per reply level; a phone has no width to spare, so there it is
     narrower per level (depth is capped server-side either way). */
  #board-feed { --indent: 1.25rem; }
  @media (max-width: 600px) { #board-feed { --indent: .5rem; } }
  .rc-root[style*="--depth"] {
    margin-left: calc(var(--depth) * var(--indent));
    border-left: 2px solid var(--color16); padding-left: .5rem;
  }
  .rc-root.mine { background: rgba(179,90,12,.05); }
  .rc-root.pending { opacity: .6; }
  /* A deleted post that still has replies under it: a line, not a post. */
  .rc-deleted { padding: 1px 0 1px; font-size: .7rem; font-style: italic; color: var(--color11); border-bottom: 0; }
  .rc-empty { color: var(--muted); text-align: center; margin: .8rem 0; }
  .rc-more { text-align: center; color: var(--muted); font-size: .75rem; padding: .5rem 0; }
  .rc-info { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 1px; font-size: 13px; position: relative; }
  .rc-avatar { width: 18px; margin-right: 4px; font-size: 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; font-size: .78rem; word-break: break-word; overflow-wrap: anywhere; }
  .rc-time { margin-left: auto; font-size: .66rem; color: var(--color11); text-decoration: none; }
  .rc-actions + .rc-time, .rc-time + .rc-time { margin-left: .5rem; }
  .rc-time:hover { color: var(--color10); text-decoration: underline; }
  .rc-edited { font-style: italic; }
  .rc-edited:hover { text-decoration: none; }
  .rc-body { padding-left: 22px; }
  .rc-replyQuote {
    display: block; font-size: .7rem; color: var(--color11); text-decoration: none;
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rc-replyQuote:hover { color: var(--color9); }
  .rc-text { white-space: pre-wrap; word-break: break-word; margin: 0; }
  .rc-text blockquote { margin: .2rem 0; padding: .1rem .2rem .1rem .5rem; border-left: 2px solid var(--rule-lt); }
  .rc-text code { font-family: var(--mono); background: var(--rule-lt); padding: .05rem .25rem; border-radius: 3px; }
  .rc-replyBtn {
    font-size: .7rem; font-weight: 600; color: var(--color9); text-decoration: none;
  }
  .rc-replyBtn:hover { color: var(--color33); }
  /* Reply, Edit, Delete live in the header line and show when the post is
     pointed at, so a post is its text and nothing else until it is wanted.
     Where there is no pointer (a phone) they are always there. */
  .rc-actions { display: flex; gap: .6rem; margin-left: auto; opacity: 0; transition: opacity .12s; }
  .rc-root:hover .rc-actions, .rc-root:focus-within .rc-actions { opacity: 1; }
  @media (hover: none) { .rc-actions { opacity: 1; } }

  .rc-vote-root { display: flex; flex: 0 0 auto; align-items: center; margin-left: .4rem; font-weight: 700; line-height: 14px; white-space: nowrap; user-select: none; }
  .rc-voteButton { display: flex; align-items: center; padding: 2px; opacity: .35; 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 { display: inline-block; flex: 0 0 auto; margin: 0 2px; padding: 1px 5px; font-size: .78rem; font-weight: 700; border-radius: 3px; min-width: 14px; 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; }
  .rc-upVoteIcon .rc-voteIcon { transform: rotate(180deg); }

  /* The formatting buttons appear while you are writing and not before. */
  .rc-toolbar { display: inline-flex; margin-left: auto; }
  .board-compose:not(:focus-within) .rc-toolbar { display: none; }
  .rc-toolbar-group { display: inline-block; }
  .rc-toolbar-item {
    color: var(--color37); display: inline-flex;
    height: 20px; width: 20px; justify-content: center; align-items: center;
  }
  .rc-toolbar-item:hover { color: var(--color9); }
  .rc-toolbar-item svg { fill: currentColor; width: 12px; height: 12px; }

  /* Compose box: one line to write in, and one small line under it. The
     icon opens the nickname and icon choices; nothing else is on show
     until it is needed. */
  .board-compose {
    border: 1px solid var(--color5); border-radius: 6px; padding: 5px 6px; margin: .15rem 0 .35rem;
  }
  .board-compose:focus-within { border-color: var(--color16); }
  .board-compose-row { display: flex; gap: .4rem; align-items: center; }
  .board-compose-row + .board-compose-row { margin-top: .2rem; }
  .board-main { align-items: flex-start; }
  .board-compose-sub { font-size: .7rem; color: var(--color11); min-height: 20px; }
  #board-message {
    flex: 1; min-width: 0; padding: 3px 4px; font-size: 15px; line-height: 1.35;
    resize: none; overflow: hidden; max-height: 8rem; overflow-y: auto; outline: none;
  }
  #board-send {
    flex: 0 0 auto; height: 1.65rem; padding: 0 12px; border-radius: 4px;
    background: var(--color15); color: var(--color6); font-weight: 600; font-size: .85rem;
  }
  #board-send:hover:not(:disabled) { background: var(--color33); }
  .board-link { font-size: .7rem; color: var(--color11); }
  .board-link:hover { color: var(--color9); text-decoration: underline; }
  #board-sent { color: rgb(var(--color12)); font-weight: 600; }
  #board-preview { min-height: 1.5rem; padding: .2rem .4rem; }
  .board-icon-btn { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; padding: .2rem .25rem; border-radius: 4px; }
  .board-icon-btn:hover { background: var(--color5); }
  .board-profile-panel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--color16); font-size: .75rem; color: var(--color11); }
  #board-nick { border-bottom: 1px solid var(--color16); padding: .15rem 0; width: 8rem; }
  .board-icon-palette { display: flex; flex-wrap: wrap; gap: .1rem; }
  .board-icon-choice { font-size: 1rem; padding: .1rem .2rem; border-radius: 4px; }
  .board-icon-choice:hover { background: var(--color5); }
  .board-banner {
    justify-content: space-between; font-size: .72rem; color: var(--color11);
    background: var(--color5); border-radius: 4px; padding: .15rem .4rem;
  }
  #board-reply-cancel, #board-edit-cancel { color: var(--color11); }
  .board-error {
    margin: 0 0 .25rem; padding: .2rem .5rem; font-size: .78rem; border-radius: 4px;
    color: rgb(var(--color30)); background: rgba(var(--color30), .08);
  }
</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();
  }

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

  // 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});
      const res = await fetch(`/board/vote?page=${PAGE}`, {method: "POST", body});
      const data = await res.json().catch(() => ({ok: false, error: "The app did not answer."}));
      if (!data.ok) window.alert(data.error || "That did not go through.");
      pollBoard();
    } finally {
      btn.disabled = false;
    }
  }
  // A delete hides the post from readers; it costs real coins like a vote,
  // and it cannot take the text off the chain, so the prompt says both
  // before it asks for the passphrase.
  async function handleDeleteClick(btn) {
    if (btn.disabled) return;
    btn.disabled = true;
    try {
      const ref = btn.dataset.ref;
      let cost = "";
      try {
        const res = await fetch(`/api/board/delete_fee?ref=${encodeURIComponent(ref)}`, {cache: "no-store"});
        const data = await res.json();
        if (!data.ok) { window.alert(data.reason || "Can't delete."); return; }
        cost = ` This burns ${BURN} tick + ~${data.fee} tick fee (real coins).`;
      } catch (e) {
        // Fee lookup failed; still lets the delete through with a generic prompt.
      }
      const passphrase = window.prompt(
        "Hide this post from readers? Its text stays on the chain for anyone who reads blocks." +
        cost + " Passphrase:");
      if (passphrase === null) return;  // cancelled, nothing sent
      const body = new URLSearchParams({csrf_token: CSRF, ref, passphrase});
      const res = await fetch(`/board/delete?page=${PAGE}`, {method: "POST", body});
      const data = await res.json().catch(() => ({ok: false, error: "The app did not answer."}));
      if (!data.ok) window.alert(data.error || "That did not go through.");
      pollBoard();
    } finally {
      btn.disabled = false;
    }
  }
  if (feedEl) {
    feedEl.addEventListener("click", event => {
      const btn = event.target.closest(".rc-deleteBtn");
      if (btn) handleDeleteClick(btn);
    });
  }
  function wireVoteButtons(root) {
    (root || document).querySelectorAll(".rc-voteButton[data-ref]").forEach(btn => {
      btn.addEventListener("click", () => handleVoteClick(btn));
    });
  }
  wireVoteButtons(document);

  const composeForm = document.getElementById("board-compose");
  if (composeForm) {
    let ownNick    = composeForm.dataset.ownNick || "";
    let 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 profilePanel  = document.getElementById("board-profile-panel");
    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 editRefInput  = document.getElementById("board-edit-ref");
    const editOrigInput = document.getElementById("board-edit-orig");
    const editBanner    = document.getElementById("board-edit-banner");
    const editCancel    = document.getElementById("board-edit-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", () => {
      profilePanel.hidden = !profilePanel.hidden;
    });
    iconPalette.querySelectorAll(".board-icon-choice").forEach(btn => {
      btn.addEventListener("click", () => {
        iconValue.value = btn.dataset.idx;
        iconBtn.textContent = btn.textContent;
        markProfileDirty();
      });
    });
    nickInput.addEventListener("input", markProfileDirty);

    function leaveEditMode() {
      editRefInput.value = "";
      editOrigInput.value = "";
      editBanner.hidden = true;
    }

    // Editing loads the post into the compose box. The server works out
    // what changed from the original and the new text, so the page only
    // has to say which post, and what it said.
    feedEl.addEventListener("click", event => {
      const edit = event.target.closest(".rc-editBtn");
      if (!edit) return;
      replyRefInput.value = "";
      replyBanner.hidden = true;
      editRefInput.value = edit.dataset.ref;
      editOrigInput.value = edit.dataset.text;
      editBanner.hidden = false;
      msgInput.value = edit.dataset.text;
      msgInput.focus();
      refreshCounter();
      autoGrow();
    });
    editCancel.addEventListener("click", () => {
      leaveEditMode();
      msgInput.value = "";
      refreshCounter();
      autoGrow();
    });

    feedEl.addEventListener("click", event => {
      const btn = event.target.closest(".rc-replyBtn:not(.rc-editBtn):not(.rc-deleteBtn)");
      if (!btn) return;
      if (editRefInput.value) msgInput.value = "";  // the text being edited is not a reply
      leaveEditMode();
      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);
          if (editRefInput.value) {
            params.set("edit_ref", editRefInput.value);
            params.set("orig", editOrigInput.value);
            params.set("new", msgInput.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() {
      // An edit sends a splice, whose size the server works out (the fee
      // quote below uses it), so what is limited here is the text the post
      // ends up with. Anything else carries its header.
      const maxBytes = editRefInput.value ? MAX_MEMO_BYTES - TAG_LEN
                                          : MAX_MEMO_BYTES - TAG_LEN - headerBytes();
      const bytes = new TextEncoder().encode(msgInput.value).length;
      const empty = msgInput.value.trim() === "";
      const unchanged = editRefInput.value !== "" && msgInput.value === editOrigInput.value;
      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 (unchanged) {
        setSendState(true, "Nothing changed.");
      } 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();

    // Sending happens in the background. The page stays where it is, the
    // button says what it is doing, and the new post turns up in the feed
    // through the same poll that brings everyone else's. What comes back is
    // a verdict and the next one-time token, so there is nothing to reload.
    // Without scripts the form still posts and redirects (see forms.py).
    const errorEl   = document.getElementById("board-compose-error");
    const sentEl    = document.getElementById("board-sent");
    const passInput = document.getElementById("board-passphrase");
    const tokenInput = composeForm.querySelector("input[name=form_token]");
    let sending = false;

    function showError(text) {
      errorEl.textContent = text || "";
      errorEl.hidden = !text;
    }

    composeForm.addEventListener("submit", async (e) => {
      e.preventDefault();
      if (sending) return;
      // Asked right before signing, so nothing sits in a visible passphrase
      // field, and gone from the page again the moment it is read.
      const passphrase = window.prompt("Passphrase:");
      if (passphrase === null) return;  // cancelled, nothing sent
      passInput.value = passphrase;
      const body = new FormData(composeForm);
      passInput.value = "";
      sending = true;
      sendBtn.disabled = true;
      sendBtn.textContent = "Sending…";
      showError("");
      try {
        const res = await fetch(composeForm.action, {
          method: "POST", body, headers: {"X-Requested-With": "fetch"}});
        const data = await res.json();
        if (data.form_token) tokenInput.value = data.form_token;
        if (data.ok) {
          if (profileChanged.value) {      // now on the chain: stop sending it
            ownNick = nickInput.value.trim();
            ownIconIdx = currentIconIdx();
            markProfileDirty();
          }
          msgInput.value = "";
          replyRefInput.value = "";
          replyBanner.hidden = true;
          leaveEditMode();
          autoGrow();
          sentEl.hidden = false;
          setTimeout(() => { sentEl.hidden = true; }, 2500);
          pollBoard();
        } else {
          showError(data.error);
        }
      } catch (err) {
        showError("The app did not answer, so it is not known whether that went out. " +
                  "Look at the feed before trying again.");
      } finally {
        sending = false;
        sendBtn.textContent = "Send";
        refreshCounter();
      }
    });
  }

  // One continuous feed: `loaded` chunks of threads are on screen, more
  // are appended as the sentinel scrolls into view, and the poll re-renders
  // exactly what is loaded so new posts and votes show up in place.
  let loaded = PAGE;
  let pollInFlight = false;

  async function pollBoard() {
    if (pollInFlight) return;
    pollInFlight = true;
    try {
      const res = await fetch("/api/board/fragment?page=" + loaded);
      if (!res.ok) throw new Error("bad status " + res.status);
      const html = await res.text();
      const next = document.createElement("template");
      next.innerHTML = html.trim();
      const rows = document.getElementById("board-rows");
      if (!rows || !next.content.firstElementChild) return;
      rows.replaceChildren(...next.content.childNodes);
      updateTimes(rows);
      wireVoteButtons(rows);
      watchSentinel();
    } catch (e) {
      // Keep the current feed usable when a poll is temporarily offline.
    } finally {
      pollInFlight = false;
    }
  }

  let observer = null;
  function watchSentinel() {
    if (observer) observer.disconnect();
    const more = document.getElementById("board-more");
    if (!more || !("IntersectionObserver" in window)) return;
    observer = new IntersectionObserver((entries) => {
      if (entries.some(e => e.isIntersecting) && !pollInFlight) {
        loaded += 1;
        pollBoard();
      }
    }, {rootMargin: "400px"});
    observer.observe(more);
  }

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