const tabs = [...document.querySelectorAll('[role="tab"]')];
for (const tab of tabs) {
  tab.addEventListener("click", () => {
    for (const candidate of tabs) {
      candidate.setAttribute("aria-selected", String(candidate === tab));
    }
    for (const panel of document.querySelectorAll('[role="tabpanel"]')) {
      panel.hidden = panel.id !== tab.getAttribute("aria-controls");
    }
  });
}

for (const button of document.querySelectorAll(".copy")) {
  button.addEventListener("click", async () => {
    const target = button.dataset.copyTarget && document.getElementById(button.dataset.copyTarget);
    const value = target ? target.textContent : button.dataset.copy;
    if (!value) return;
    await navigator.clipboard.writeText(value);
    const icon = button.textContent;
    button.textContent = "✓";
    window.setTimeout(() => { button.textContent = icon; }, 900);
  });
}

for (const log of document.querySelectorAll(".log")) {
  const lines = log.textContent.split("\n");
  log.replaceChildren();
  lines.forEach((line, index) => {
    const span = document.createElement("span");
    if (line.startsWith("phase ")) span.className = "phase";
    else if (line.includes("@sha256:")) span.className = "reference";
    else if (/ready|promoted|terminated|success/.test(line)) span.className = "success";
    span.textContent = line;
    log.append(span);
    if (index < lines.length - 1) log.append("\n");
  });
}