document.getElementById("verify-form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const btn = e.target.querySelector("button[type=submit]");
  btn.disabled = true;
  btn.textContent = "$ uploading...";
  document.getElementById("status-area").innerHTML = "";

  const fd = new FormData(e.target);
  try {
    const r = await fetch("/verify", { method: "POST", body: fd });
    const d = await r.json();
    if (r.ok) {
      document.getElementById("status-area").innerHTML = `
        <div class="status-card pending">
          <div class="title">&#9679; Queued</div>
          Task <code>${d.task_id}</code> submitted. Worker processing.
          <div class="matrix"><dt>Runner</dt><dd>${fd.get("runner")}</dd></div>
          <a class="result-link" href="/result/${d.task_id}">Open result page &rarr;</a>
        </div>`;
    } else {
      document.getElementById("status-area").innerHTML = `
        <div class="status-card error">
          <div class="title">&#10007; Error</div>
          ${d.detail || "Upload failed"}
        </div>`;
    }
  } catch (err) {
    document.getElementById("status-area").innerHTML = `
      <div class="status-card error">
        <div class="title">&#10007; Network Error</div>
        ${err.message}
      </div>`;
  }
  btn.disabled = false;
  btn.textContent = "$ verify";
});