{% extends "base.html" %}
{% block content %}
<div id="cluster" class="d-grid gap-3">
  <div id="env-note" class="alert alert-info d-none mb-0"><i class="bi bi-info-circle me-2"></i>{{ _('Sync is configured in the .env file of this server, so this page is read-only. Edit OCRROUTE_SYNC_* there and restart.') }}</div>
  <div id="loading" class="text-muted small">{{ _('Loading…') }}</div>

  <!-- ============ standalone ============ -->
  <div id="view-standalone" class="d-none d-grid gap-3">
    <p class="text-muted mb-0">{{ _('A cluster shares one configuration between servers: providers, credentials, routes, API keys and users are edited on the primary and copied to every member. OCR history, usage and cache stay on each server.') }}</p>
    <div class="row g-3">
      <div class="col-12 col-lg-6"><div class="card h-100"><div class="card-header"><i class="bi bi-diagram-3"></i>{{ _('Create a cluster') }}</div>
        <div class="card-body d-grid gap-2">
          <p class="small text-muted mb-1">{{ _('This server becomes the primary: you edit the configuration here, then add other servers with join codes.') }}</p>
          <label class="form-label mb-0">{{ _('Cluster name') }}</label>
          <input class="form-control" id="cl-name" maxlength="60" placeholder="production">
          <button class="btn btn-grad mt-1" id="create" type="button"><i class="bi bi-plus-lg me-1"></i>{{ _('Create cluster') }}</button>
        </div></div></div>
      <div class="col-12 col-lg-6"><div class="card h-100"><div class="card-header"><i class="bi bi-box-arrow-in-right"></i>{{ _('Join a cluster') }}</div>
        <div class="card-body d-grid gap-2">
          <p class="small text-muted mb-1">{{ _('Paste the join code created for this server on the primary (Cluster > Add servers). This server then copies the primary\'s configuration.') }}</p>
          <label class="form-label mb-0">{{ _('Join code') }}</label>
          <textarea class="form-control font-monospace small" id="join-code" rows="3" placeholder="OCRJ1-..."></textarea>
          <div class="small text-warning"><i class="bi bi-exclamation-triangle me-1"></i>{{ _('Joining replaces this server\'s providers, credentials, routes, API keys and users with the primary\'s: sign in with an account from the primary afterwards.') }}</div>
          <button class="btn btn-grad mt-1" id="join" type="button"><i class="bi bi-box-arrow-in-right me-1"></i>{{ _('Join cluster') }}</button>
          <div id="join-result" class="small"></div>
        </div></div></div>
    </div>
  </div>

  <!-- ============ primary ============ -->
  <div id="view-primary" class="d-none d-grid gap-3">
    <div class="card"><div class="card-body d-flex flex-wrap align-items-center gap-2">
      <div class="me-auto"><div class="h5 mb-0"><i class="bi bi-diagram-3 me-1"></i><span class="cl-title"></span></div>
        <div class="small text-muted">{{ _('This server is the primary: configuration changes made here are copied to every member.') }}</div></div>
      <button class="btn btn-sm btn-outline-danger" id="delete-cluster" type="button"><i class="bi bi-trash me-1"></i>{{ _('Delete cluster') }}</button>
      <div id="delete-confirm" class="w-100 d-none p-2 rounded border border-danger small">{{ _('Delete the cluster? Members are refused from now on and keep the configuration they have. This server stays as it is.') }}
        <div class="d-flex gap-1 mt-2"><button class="btn btn-sm btn-danger" id="delete-yes" type="button">{{ _('Delete cluster') }}</button><button class="btn btn-sm btn-outline-secondary" id="delete-no" type="button">{{ _('Cancel') }}</button></div></div>
    </div></div>

    <div class="card"><div class="card-header"><i class="bi bi-hdd-network"></i>{{ _('Members') }} <span class="badge text-bg-secondary ms-1" id="member-count">0</span>
      <button class="btn btn-sm btn-outline-secondary ms-auto" id="notify" type="button" title="{{ _('Send this server\'s current address to every member (automatic when it changes)') }}"><i class="bi bi-megaphone me-1"></i>{{ _('Notify members') }}</button>
      <button class="btn btn-sm btn-grad ms-1" id="add-servers" type="button"><i class="bi bi-plus-lg me-1"></i>{{ _('Add servers') }}</button></div>
      <div class="card-body d-grid gap-3">
        <div id="add-form" class="card p-3 d-none">
          <div class="fw-semibold mb-2"><i class="bi bi-plus-circle me-1"></i>{{ _('Add servers') }}</div>
          <div class="row g-2 small text-muted d-none d-md-flex mb-1"><div class="col-md-5">{{ _('Name') }} *</div><div class="col-md-6">{{ _('Notes (optional)') }}</div></div>
          <div id="add-rows" class="d-grid gap-2"></div>
          <div class="d-flex flex-wrap gap-2 mt-2">
            <button class="btn btn-sm btn-outline-secondary" id="add-row" type="button"><i class="bi bi-plus me-1"></i>{{ _('Add row') }}</button>
            <span class="ms-auto"></span>
            <button class="btn btn-sm btn-outline-secondary" id="add-cancel" type="button">{{ _('Cancel') }}</button>
            <button class="btn btn-sm btn-grad" id="add-create" type="button"><i class="bi bi-check2 me-1"></i><span id="add-create-label">{{ _('Create join codes') }}</span></button>
          </div>
        </div>
        <div id="codes-box" class="alert alert-success d-none mb-0">
          <div class="d-flex align-items-center mb-1"><div class="fw-semibold me-auto"><i class="bi bi-key me-1"></i>{{ _('Join codes') }}</div>
            <button class="btn btn-sm btn-outline-secondary me-1" id="copy-all" type="button"><i class="bi bi-clipboard me-1"></i>{{ _('Copy all') }}</button>
            <button class="btn btn-sm btn-outline-secondary" id="codes-close" type="button">{{ _('Done') }}</button></div>
          <div class="small mb-2">{{ _('On each server, open Cluster > Join a cluster and paste its own code. A code contains that server\'s secret: send it privately.') }}</div>
          <div id="codes-list" class="d-grid gap-2"></div>
        </div>
        <div class="row g-2" id="members"></div>
      </div>
    </div>

    <div class="card"><div class="card-header"><i class="bi bi-signpost-split"></i>{{ _('Addresses in the join codes') }}</div>
      <div class="card-body d-grid gap-2">
        <div class="form-text">{{ _('Members reach this primary through these addresses, best first (tunnels, public URL, LAN). They are included in every join code and members are told when they change.') }}</div>
        <div id="host-warning" class="alert alert-warning d-none mb-0 small"><i class="bi bi-exclamation-triangle me-2"></i>{{ _('This server only listens on 127.0.0.1 and has no tunnel or public URL, so other computers cannot reach it. Start a tunnel on the Endpoints page, or set OCRROUTE_HOST=0.0.0.0 in .env and restart.') }}</div>
        <div id="addresses" class="d-grid gap-1"></div>
      </div>
    </div>
  </div>

  <!-- ============ member ============ -->
  <div id="view-member" class="d-none d-grid gap-3">
    <div class="card"><div class="card-body d-flex flex-wrap align-items-center gap-2">
      <div class="me-auto"><div class="h5 mb-0"><i class="bi bi-diagram-3 me-1"></i><span class="cl-title"></span></div>
        <div class="small text-muted">{{ _('This server is a member: it copies the primary\'s configuration, which is read-only here.') }}</div></div>
      <button class="btn btn-sm btn-outline-secondary" id="sync-now" type="button"><i class="bi bi-arrow-repeat me-1"></i>{{ _('Sync now') }}</button>
      <button class="btn btn-sm btn-outline-danger" id="leave" type="button"><i class="bi bi-box-arrow-left me-1"></i>{{ _('Leave cluster') }}</button>
      <div id="leave-confirm" class="w-100 d-none p-2 rounded border border-danger small">{{ _('Leave the cluster? This server stops copying the primary and keeps the configuration it has now.') }}
        <div class="d-flex gap-1 mt-2"><button class="btn btn-sm btn-danger" id="leave-yes" type="button">{{ _('Leave cluster') }}</button><button class="btn btn-sm btn-outline-secondary" id="leave-no" type="button">{{ _('Cancel') }}</button></div></div>
    </div></div>
    <div class="card"><div class="card-header"><i class="bi bi-activity"></i>{{ _('Connection to the primary') }}</div>
      <div class="card-body"><table class="table table-sm small mb-0" id="status"></table></div></div>
    <div class="card"><div class="card-header"><i class="bi bi-hdd-network"></i>{{ _('Members') }} <span class="badge text-bg-secondary ms-1" id="member-count-m">0</span></div>
      <div class="card-body"><div class="row g-2" id="members-m"></div></div></div>
  </div>
</div>
{% endblock %}
{% block scripts %}<script>
document.addEventListener("DOMContentLoaded", () => {
  const {api, toast} = OcrRoute, $ = (s) => document.querySelector(s), T = (k) => (window.I18N && window.I18N[k]) || k;
  const esc = (v) => String(v ?? "").replace(/[&<>"]/g, (c) => ({"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;"}[c]));
  let st = null, editing = new Set(), confirmRemove = null, confirmRotate = null, shownCodes = {};
  async function copy(text) {  // also works on plain http:// pages and without clipboard permission
    try { if (window.isSecureContext && navigator.clipboard) { await navigator.clipboard.writeText(text); toast(T("Copied")); return; } } catch (e) { /* fall back */ }
    const ta = document.createElement("textarea"); ta.value = text; ta.setAttribute("readonly", ""); ta.style.position = "fixed"; ta.style.opacity = "0";
    document.body.appendChild(ta); ta.select(); let ok = false; try { ok = document.execCommand("copy"); } catch (e) { ok = false; } ta.remove();
    toast(ok ? T("Copied") : T("Copy blocked by the browser: select the text and press Ctrl+C"), !ok);
  }
  const BADGE = {up_to_date: ["healthy", "up to date"], behind: ["degraded", "behind"], paused: ["degraded", "paused"], offline: ["down", "offline"], never: ["unknown", "never connected"]};
  const when = (v) => (v || "").replace("T", " ").slice(0, 19) || "-";
  const codeRow = (label, code, id) => `<div class="input-group input-group-sm"><span class="input-group-text" style="min-width:8rem">${esc(label)}</span><input class="form-control font-monospace code-value" id="${id}" readonly value="${esc(code)}"><button class="btn btn-outline-secondary copy-code" data-f="${id}" type="button"><i class="bi bi-clipboard"></i></button></div>`;
  const bindCopies = (root) => root.querySelectorAll(".copy-code").forEach((b) => b.onclick = () => copy($("#" + b.dataset.f).value));

  function render() {
    $("#loading").classList.add("d-none");
    const locked = st.source === "environment";
    $("#env-note").classList.toggle("d-none", !locked);
    ["standalone", "primary", "member"].forEach((m) => $("#view-" + m).classList.toggle("d-none", st.mode !== m));
    document.querySelectorAll(".cl-title").forEach((e) => e.textContent = T("Cluster") + " " + (st.cluster_name || ""));
    document.querySelectorAll("#cluster button, #cluster input, #cluster textarea").forEach((e) => { if (locked && !e.classList.contains("copy-code")) e.disabled = true; });
    if (st.mode === "standalone") $("#cl-name").placeholder = (st.this.name || "production") + "-cluster";
    if (st.mode === "primary") { renderMembers(); renderAddresses(); }
    if (st.mode === "member") renderMember();
  }
  // ---------- primary
  function memberCard(n) {
    const [cls, label] = BADGE[n.status] || ["unknown", n.status];
    if (n.role === "primary") {
      return `<div class="col-12 col-lg-6"><div class="card h-100 p-3 border-primary"><div class="d-flex align-items-start gap-2"><div class="flex-fill">
        <div class="fw-semibold">${esc(n.label)} <span class="badge text-bg-primary ms-1">${T("Primary")}</span> <span class="badge text-bg-light">${T("this server")}</span></div>
        <div class="small text-muted">v${esc(n.version)}</div></div><span class="status healthy">${T("online")}</span></div></div></div>`;
    }
    if (editing.has(n.key)) {
      return `<div class="col-12 col-lg-6"><div class="card h-100 p-3 border-primary member-card" data-key="${esc(n.key)}">
        <div class="fw-semibold mb-2"><i class="bi bi-pencil me-1"></i>${T("Edit member")}</div>
        <div class="d-grid gap-2"><input class="form-control form-control-sm e-label" maxlength="80" value="${esc(n.label)}" placeholder="${esc(T("Name"))}">
          <input class="form-control form-control-sm e-notes" maxlength="500" value="${esc(n.notes || "")}" placeholder="${esc(T("Notes (optional)"))}"></div>
        <div class="d-flex gap-1 mt-2"><button class="btn btn-sm btn-grad e-save" type="button"><i class="bi bi-check2 me-1"></i>${T("Save")}</button><button class="btn btn-sm btn-outline-secondary e-cancel" type="button">${T("Cancel")}</button></div></div></div>`;
    }
    const code = shownCodes[n.key];
    return `<div class="col-12 col-lg-6"><div class="card h-100 p-3 member-card" data-key="${esc(n.key)}">
      <div class="d-flex align-items-start gap-2"><div class="flex-fill"><div class="fw-semibold m-label">${esc(n.label)}</div>
        <div class="small text-muted">${esc(n.name || "")}${n.ip ? " · " + esc(n.ip) : ""}${n.version ? " · v" + esc(n.version) : ""}</div></div>
        <span class="status ${cls} m-status">${esc(T(label))}</span></div>
      <div class="small mt-2"><span class="text-muted">${T("Last contact")}:</span> ${esc(when(n.last_seen))}</div>
      ${n.notes ? `<div class="small text-muted mt-1 m-notes">${esc(n.notes)}</div>` : ""}
      ${code ? `<div class="mt-2">${codeRow(T("Join code"), code, "code-" + n.key)}</div>` : ""}
      <div class="d-flex flex-wrap gap-1 mt-2">
        <button class="btn btn-sm btn-outline-primary m-edit" type="button"><i class="bi bi-pencil me-1"></i>${T("Edit")}</button>
        <button class="btn btn-sm btn-outline-danger m-remove" type="button"><i class="bi bi-trash me-1"></i>${T("Remove")}</button>
        <span class="ms-auto"></span>
        ${n.own_token ? `<button class="btn btn-sm btn-outline-secondary m-code" type="button"><i class="bi bi-key me-1"></i>${code ? T("Hide join code") : T("Show join code")}</button>` : ""}
        <button class="btn btn-sm btn-outline-secondary m-rotate" type="button"><i class="bi bi-arrow-repeat me-1"></i>${T("New join code")}</button>
        <button class="btn btn-sm btn-outline-secondary m-pause" type="button"><i class="bi bi-${n.paused ? "play" : "pause"} me-1"></i>${n.paused ? T("Resume") : T("Pause")}</button>
      </div>
      ${confirmRemove === n.key ? `<div class="mt-2 p-2 rounded border border-danger small">${T("Remove this server from the cluster? It is refused from now on and keeps the configuration it has.")}
        <div class="d-flex gap-1 mt-2"><button class="btn btn-sm btn-danger m-remove-yes" type="button">${T("Remove")}</button><button class="btn btn-sm btn-outline-secondary m-remove-no" type="button">${T("Cancel")}</button></div></div>` : ""}
      ${confirmRotate === n.key ? `<div class="mt-2 p-2 rounded border small">${T("Create a new join code? The old one stops working: the server must join again with the new code.")}
        <div class="d-flex gap-1 mt-2"><button class="btn btn-sm btn-grad m-rotate-yes" type="button">${T("New join code")}</button><button class="btn btn-sm btn-outline-secondary m-rotate-no" type="button">${T("Cancel")}</button></div></div>` : ""}
    </div></div>`;
  }
  async function memberCall(method, path, body) {
    try { const r = await api(method, path, body); return r || {}; } catch (e) { toast(e.message, true); return null; }
  }
  function renderMembers() {
    const list = st.members || [];
    $("#member-count").textContent = list.length;
    $("#members").innerHTML = list.map(memberCard).join("");
    bindCopies($("#members"));
    document.querySelectorAll("#members .member-card").forEach((card) => {
      const key = card.dataset.key, n = list.find((x) => x.key === key), on = (s, f) => { const el = card.querySelector(s); if (el) el.onclick = f; };
      on(".e-cancel", () => { editing.delete(key); renderMembers(); });
      on(".e-save", async () => {
        const label = card.querySelector(".e-label").value.trim(); if (!label) { card.querySelector(".e-label").focus(); return; }
        if (await memberCall("PATCH", "/v1/sync/nodes/" + encodeURIComponent(key), {label, notes: card.querySelector(".e-notes").value})) { editing.delete(key); toast(T("Saved")); await load(); }
      });
      on(".m-edit", () => { editing.add(key); renderMembers(); });
      on(".m-remove", () => { confirmRemove = key; renderMembers(); });
      on(".m-remove-no", () => { confirmRemove = null; renderMembers(); });
      on(".m-remove-yes", async () => { confirmRemove = null; if (await memberCall("DELETE", "/v1/sync/nodes/" + encodeURIComponent(key)) !== null) { toast(T("Saved")); await load(); } });
      on(".m-code", async () => {
        if (shownCodes[key]) { delete shownCodes[key]; renderMembers(); return; }
        const r = await memberCall("GET", "/v1/cluster/members/" + encodeURIComponent(key) + "/join-code"); if (r && r.join_code) { shownCodes[key] = r.join_code; renderMembers(); }
      });
      on(".m-rotate", () => { confirmRotate = key; renderMembers(); });
      on(".m-rotate-no", () => { confirmRotate = null; renderMembers(); });
      on(".m-rotate-yes", async () => {
        confirmRotate = null; const r = await memberCall("PATCH", "/v1/sync/nodes/" + encodeURIComponent(key), {regenerate_token: true});
        if (r && r.join_code) { shownCodes[key] = r.join_code; toast(T("Saved")); await load(); }
      });
      on(".m-pause", async () => { if (await memberCall("PATCH", "/v1/sync/nodes/" + encodeURIComponent(key), {paused: !n.paused})) { toast(T("Saved")); await load(); } });
    });
  }
  function renderAddresses() {
    const a = st.addresses || [];
    $("#host-warning").classList.toggle("d-none", !!(st.reachable_from_network || st.has_public_address));
    $("#addresses").innerHTML = a.map((x) => `<div><div class="input-group input-group-sm"><span class="input-group-text">${esc(x.label)}</span><input class="form-control font-monospace" readonly value="${esc(x.url)}"></div>` +
      (x.note ? `<div class="form-text ${x.stable ? "" : "text-warning"}"><i class="bi bi-${x.stable ? "check2" : "exclamation-triangle"} me-1"></i>${esc(x.note)}</div>` : "") + `</div>`).join("") || `<div class="small text-muted">-</div>`;
  }
  function addRow(focus) {
    const row = document.createElement("div"); row.className = "row g-2 add-row";
    row.innerHTML = `<div class="col-12 col-md-5"><input class="form-control form-control-sm a-label" maxlength="80" placeholder="${esc(T("Name, e.g. ocr-paris-2"))}"></div>
      <div class="col-10 col-md-6"><input class="form-control form-control-sm a-notes" maxlength="500" placeholder="${esc(T("Notes (optional)"))}"></div>
      <div class="col-2 col-md-1"><button class="btn btn-sm btn-outline-danger w-100 a-remove" type="button" title="${esc(T("Remove"))}"><i class="bi bi-x-lg"></i></button></div>`;
    row.querySelector(".a-remove").onclick = () => { row.remove(); if (!document.querySelector(".add-row")) addRow(); countRows(); };
    row.querySelector(".a-label").addEventListener("input", countRows);
    row.querySelector(".a-label").addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); addRow(true); } });
    $("#add-rows").appendChild(row); if (focus) row.querySelector(".a-label").focus(); countRows();
  }
  function countRows() {
    const n = [...document.querySelectorAll(".add-row .a-label")].filter((i) => i.value.trim()).length;
    $("#add-create-label").textContent = T("Create join codes") + (n > 1 ? " (" + n + ")" : "");
  }
  // ---------- member
  function renderMember() {
    const s = st.state || {}, row = (k, v) => `<tr><td class="text-muted" style="width:14rem">${esc(k)}</td><td>${v}</td></tr>`;
    const changes = s.last_result ? Object.entries(s.last_result.upserted || {}).map(([k, n]) => `${esc(k)}: ${n}`).join(" · ") : "-";
    const addrs = (st.primary_addresses || []).map((a) => {
      const h = (s.address_health || {})[a.url] || {};
      return `<div class="font-monospace">${esc(a.url)}${a.url === s.via ? ` <span class="badge text-bg-success">${T("in use")}</span>` : ""}${h.error ? ` <span class="text-danger small">${esc(h.error)}</span>` : ""}</div>`;
    }).join("");
    $("#status").innerHTML = row(T("Primary"), esc(s.primary_name || "-")) +
      row(T("Status"), s.last_error ? `<span class="text-danger">${esc(s.last_error)}</span>` : (s.last_success_at ? `<span class="status healthy">${T("up to date")}</span>` : `<span class="text-muted">${T("Connecting…")}</span>`)) +
      row(T("Last successful sync"), esc(when(s.last_success_at))) + row(T("Last change applied"), esc(when(s.last_change_at))) +
      row(T("Connected via"), esc(s.via || "-")) + row(T("Addresses of the primary"), addrs || "-") + row(T("Copied from the primary"), changes) +
      (s.last_result && s.last_result.skipped && s.last_result.skipped.length ? row(T("Skipped"), esc(s.last_result.skipped.join("; "))) : "");
    const list = st.members || [];
    $("#member-count-m").textContent = list.length;
    $("#members-m").innerHTML = list.map((n) => { const [cls, label] = BADGE[n.status] || ["unknown", n.status];
      return `<div class="col-12 col-md-6 col-xl-4"><div class="card p-2 small"><div class="d-flex gap-2 align-items-center"><div class="flex-fill"><div class="fw-semibold">${esc(n.label || n.name)} ${n.role === "primary" ? `<span class="badge text-bg-primary">${T("Primary")}</span>` : ""}</div><div class="text-muted">${n.version ? "v" + esc(n.version) : ""}</div></div><span class="status ${cls}">${esc(T(label))}</span></div></div></div>`; }).join("")
      || `<div class="small text-muted">${T("The member list appears after the first sync.")}</div>`;
  }
  // ---------- data + events
  async function load() { try { st = await api("GET", "/v1/cluster"); render(); } catch (e) { toast(e.message, true); } }
  $("#create").onclick = async () => {
    try { st = await api("POST", "/v1/cluster/create", {name: $("#cl-name").value || $("#cl-name").placeholder}); render(); toast(T("Saved")); }
    catch (e) { toast(e.message, true); }
  };
  $("#join").onclick = async () => {
    const out = $("#join-result"), code = $("#join-code").value.trim();
    if (!code) { $("#join-code").focus(); return; }
    out.className = "small text-muted"; out.textContent = T("Joining…"); $("#join").disabled = true;
    try { st = await api("POST", "/v1/cluster/join", {code}); out.textContent = ""; $("#join-code").value = ""; render(); toast(T("Joined")); }
    catch (e) { out.className = "small text-danger"; out.textContent = e.message; }
    finally { $("#join").disabled = false; }
  };
  $("#delete-cluster").onclick = () => $("#delete-confirm").classList.remove("d-none");
  $("#delete-no").onclick = () => $("#delete-confirm").classList.add("d-none");
  $("#delete-yes").onclick = async () => { try { st = await api("POST", "/v1/cluster/delete"); $("#delete-confirm").classList.add("d-none"); render(); } catch (e) { toast(e.message, true); } };
  $("#leave").onclick = () => $("#leave-confirm").classList.remove("d-none");
  $("#leave-no").onclick = () => $("#leave-confirm").classList.add("d-none");
  $("#leave-yes").onclick = async () => { try { st = await api("POST", "/v1/cluster/leave"); $("#leave-confirm").classList.add("d-none"); render(); } catch (e) { toast(e.message, true); } };
  $("#sync-now").onclick = async () => { try { await api("POST", "/v1/sync/now"); await load(); } catch (e) { toast(e.message, true); } };
  $("#notify").onclick = async () => { try { const r = await api("POST", "/v1/sync/notify"); const n = Object.values(r.results || {}); toast(T("Notified") + ": " + n.filter((x) => x.startsWith("delivered")).length + "/" + n.length); await load(); } catch (e) { toast(e.message, true); } };
  $("#add-servers").onclick = () => { $("#add-form").classList.remove("d-none"); if (!document.querySelector(".add-row")) addRow(true); };
  $("#add-row").onclick = () => addRow(true);
  $("#add-cancel").onclick = () => { $("#add-form").classList.add("d-none"); $("#add-rows").innerHTML = ""; };
  $("#add-create").onclick = async () => {
    const items = [...document.querySelectorAll(".add-row")].map((r) => ({label: r.querySelector(".a-label").value.trim(), notes: r.querySelector(".a-notes").value.trim()})).filter((i) => i.label);
    if (!items.length) { const f = document.querySelector(".add-row .a-label"); if (f) f.focus(); return; }
    try {
      const r = await api("POST", "/v1/sync/nodes/bulk", {items});
      $("#add-form").classList.add("d-none"); $("#add-rows").innerHTML = "";
      $("#codes-list").innerHTML = r.items.map((it, i) => codeRow(it.node.label, it.join_code, "new-code-" + i)).join("");
      $("#codes-box").dataset.all = r.items.map((it) => it.node.label + "\n" + it.join_code).join("\n\n");
      bindCopies($("#codes-box")); $("#codes-box").classList.remove("d-none");
      await load(); $("#codes-box").scrollIntoView({behavior: "smooth", block: "center"});
    } catch (e) { toast(e.message, true); }
  };
  $("#copy-all").onclick = () => copy($("#codes-box").dataset.all || "");
  $("#codes-close").onclick = () => { $("#codes-box").classList.add("d-none"); $("#codes-list").innerHTML = ""; };
  load();
  setInterval(() => { if (st && st.mode !== "standalone" && !editing.size && !confirmRemove && !confirmRotate
                          && $("#add-form").classList.contains("d-none") && $("#delete-confirm").classList.contains("d-none")
                          && $("#leave-confirm").classList.contains("d-none")) load(); }, 10000);
});
</script>{% endblock %}