function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

export function renderOverviewTree(nodes, section) {
  const renderNodes = (items) =>
    `<ul>${items
      .map((node) => {
        const children = Array.isArray(node.children) ? node.children : [];
        const title = escapeHtml(node.title);
        const href = node.path ? escapeHtml(node.path.slice(section.length + 1)) : null;

        if (!children.length) {
          return `<li><a href="${href}">${title}</a></li>`;
        }

        const pageLink = href
          ? `<a class="overview-page-link" href="${href}" aria-label="Open ${title} overview">overview</a>`
          : "";
        return `<li><details><summary><span>${title}</span>${pageLink}</summary>${renderNodes(children)}</details></li>`;
      })
      .join("")}</ul>`;

  return `<div class="overview-tree">${renderNodes(nodes)}</div>`;
}