<%- include("partials/layout-top", { title }) %>
<section class="card">
  <h1><%= page.title %></h1>
  <% if (page.format === "markdown") { %>
  <div class="page-content"><%- renderedContent %></div>
  <% } else { %>
  <div class="page-content">
    <iframe class="custom-page-frame" title="<%= page.title %>" sandbox="allow-same-origin"></iframe>
  </div>
  <script>
    (() => {
      const frame = document.querySelector(".custom-page-frame");
      if (!frame) {
        return;
      }
      const resizeFrame = () => {
        try {
          const doc = frame.contentDocument || frame.contentWindow?.document;
          if (!doc || !doc.body) {
            return;
          }
          const height = Math.max(
            doc.body.scrollHeight || 0,
            doc.body.offsetHeight || 0,
            doc.documentElement?.scrollHeight || 0,
            doc.documentElement?.offsetHeight || 0
          );
          if (height) {
            frame.style.height = `${height}px`;
          }
        } catch {
          // Ignore frame sizing errors.
        }
      };
      frame.addEventListener("load", () => {
        resizeFrame();
        window.setTimeout(resizeFrame, 200);
        if (window.ResizeObserver) {
          try {
            const doc = frame.contentDocument || frame.contentWindow?.document;
            if (doc?.body) {
              const observer = new ResizeObserver(() => {
                resizeFrame();
              });
              observer.observe(doc.body);
              if (doc.documentElement) {
                observer.observe(doc.documentElement);
              }
            }
          } catch {
            // Ignore observer errors.
          }
        }
      });
      window.addEventListener("resize", resizeFrame);
      frame.srcdoc = <%- JSON.stringify(pageSrcdoc || "") %>;
      window.setTimeout(resizeFrame, 0);
    })();
  </script>
  <% } %>
</section>
<%- include("partials/layout-bottom") %>
