{% extends "base.html" %}
{% block title %}{{ name }} — metal-cdn{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{{ href('static', 'vendor', 'github-dark.min.css') }}" />
{% endblock %}
{% block content %}
<section class="hero">
  <p class="eyebrow">package</p>
  <div class="hero-title-row">
    <h1>{{ name }}</h1>
    {% if package_versions %}
    <label class="pkg-ver-picker">
      <span class="muted">channel</span>
      <select id="pkg-version-select" aria-label="Package version">
        {% for v in package_versions %}
        <option
          value="{{ v.channel }}"
          data-href="{{ package_href(v.channel, name) }}"
          {% if v.channel == channel %}selected{% endif %}
        >{{ v.label }}</option>
        {% endfor %}
      </select>
    </label>
    {% endif %}
  </div>
  <p class="lede">
    {% if channel == "lead" %}
    lead · {{ entry.version }}
    {% else %}
    pin {{ channel }} · {{ entry.version }}
    {% endif %}
    {% if entry.license %} · {{ entry.license }}{% endif %}
    {% if package_versions and package_versions|length > 1 %}
    · <a href="#history">{{ package_versions|length }} channels</a>
    {% endif %}
  </p>
  {% if entry.description %}
  <p>{{ entry.description }}</p>
  {% endif %}
  {% if entry.homepage %}
  <p><a href="{{ entry.homepage }}" rel="noopener">{{ entry.homepage }}</a></p>
  {% endif %}
  {% if entry.yanked %}
  <p class="muted">Yanked{% if entry.yank_reason %}: {{ entry.yank_reason }}{% endif %}</p>
  {% endif %}
  {% if entry.deprecated %}
  <p class="muted">Deprecated</p>
  {% endif %}
  {% if entry.successor %}
  <p>Successor: <code>{{ entry.successor }}</code></p>
  {% endif %}
</section>

<section class="about">
  <h2>About</h2>
  <dl class="meta-grid">
    <dt>Package</dt><dd><code>{{ name }}</code></dd>
    <dt>Version</dt>
    <dd>
      <a href="#history"><code>{{ entry.version }}</code></a>
      {% if channel == "lead" %}
      <span class="pill pill-lead">lead</span>
      {% endif %}
    </dd>
    <dt>Channel</dt>
    <dd><a href="{{ channel_href(channel) }}"><code>{{ channel }}</code></a></dd>
    {% if entry.maintainer_email %}
    <dt>Author</dt>
    <dd><a href="{{ author_href(entry.maintainer_email) }}">{{ entry.maintainer_email }}</a></dd>
    {% endif %}
    {% if entry.license %}
    <dt>License</dt><dd>{{ entry.license }}</dd>
    {% endif %}
    {% if entry.homepage %}
    <dt>Homepage</dt><dd><a href="{{ entry.homepage }}" rel="noopener">{{ entry.homepage }}</a></dd>
    {% endif %}
    {% if entry.aot_version is not none %}
    <dt>AOT</dt><dd>{{ entry.aot_version }}</dd>
    {% endif %}
  </dl>
</section>

{% if entry.deps %}
<section>
  <h2>Dependencies</h2>
  <p class="muted">Packages this one needs (<code>[deps]</code> / MPWD). Green = exact version published; red = missing/yanked.</p>
  <ul class="pkg-list">
    {% for dep, ver in entry.deps.items() %}
    {% set ok = (deps_ok or {}).get(dep, false) %}
    <li>
      <a class="dep-chip {% if ok %}dep-chip-ok{% else %}dep-chip-bad{% endif %}"
         href="{{ package_href('lead', dep) }}"><code>{{ dep }}</code></a>
      <a class="ver" href="{{ package_href('@' ~ ver, dep) }}">{{ ver }}</a>
      {% if not ok %}<span class="pill pill-warn">unfit</span>{% endif %}
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}
{% if needed_by %}
<section>
  <h2>Needed by</h2>
  <p class="muted">Known published packages that list this one in their <code>[deps]</code>.</p>
  <ul class="pkg-list">
    {% for dep in needed_by %}
    <li>
      <a class="dep-chip{% if needed_by|length > 1 %} dep-chip-rev{% endif %}"
         href="{{ package_href('lead', dep) }}"><code>{{ dep }}</code></a>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}
{% if package_versions %}
<section id="history">
  <h2>Version history</h2>
  <p class="muted">Lead channel plus immutable pins. Click a row to open that publish.</p>
  <div class="pkg-table-wrap">
    <table class="pkg-table pkg-history" id="pkg-history"
           data-show="3" data-total="{{ package_versions|length }}">
      <thead>
        <tr>
          <th scope="col">Channel</th>
          <th scope="col">Version</th>
          <th scope="col">Arts</th>
        </tr>
      </thead>
      <tbody>
        {% for v in package_versions %}
        <tr class="{% if v.channel == channel %}is-current{% endif %}{% if loop.index0 >= 3 %} history-fold{% endif %}"
            {% if loop.index0 >= 3 %}hidden{% endif %}>
          <td>
            <a href="{{ package_href(v.channel, name) }}">
              {% if v.channel == 'lead' %}
              <span class="pill pill-lead">lead</span>
              {% else %}
              <code>{{ v.channel }}</code>
              {% endif %}
            </a>
          </td>
          <td><a class="ver" href="{{ package_href(v.channel, name) }}">{{ v.version }}</a></td>
          <td class="mono">{{ v.artifact_count }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if package_versions|length > 3 %}
  <p class="history-more-wrap">
    <button type="button" class="history-more-btn" id="history-more-btn"
            aria-expanded="false" aria-controls="pkg-history">
      Show {{ package_versions|length - 3 }} older
    </button>
  </p>
  {% endif %}
</section>
<script>
(() => {
  const sel = document.getElementById("pkg-version-select");
  if (sel) {
    sel.addEventListener("change", () => {
      const opt = sel.selectedOptions[0];
      if (opt && opt.dataset.href) window.location.href = opt.dataset.href;
    });
  }
  const btn = document.getElementById("history-more-btn");
  const table = document.getElementById("pkg-history");
  if (!btn || !table) return;
  const folded = () => Array.from(table.querySelectorAll("tr.history-fold"));
  // Keep the active channel visible even if it's past the fold.
  folded().forEach((tr) => {
    if (tr.classList.contains("is-current")) tr.hidden = false;
  });
  const rest = () => folded().filter((tr) => tr.hidden).length;
  const sync = (open) => {
    folded().forEach((tr) => {
      if (!open && tr.classList.contains("is-current")) return;
      tr.hidden = !open;
    });
    btn.setAttribute("aria-expanded", open ? "true" : "false");
    const n = rest();
    btn.textContent = open ? "Show fewer" : ("Show " + n + " older");
    btn.hidden = !open && n === 0;
  };
  btn.addEventListener("click", () => {
    sync(btn.getAttribute("aria-expanded") !== "true");
  });
  sync(false);
})();
</script>
{% endif %}
<section>
  <h2>Artifacts</h2>
  <p class="muted">Click a name to inspect pack guts. Use the download icon to fetch the binary.</p>
  <ul class="pkg-list artifact-list" id="artifact-list">
    {% for a in entry.artifacts %}
    {% if channel == "lead" %}
      {% set dl_href = href('artifacts', 'lead', a.path) %}
      {% set inspect_href = href('artifacts', 'lead', a.path, 'inspect') %}
      {% set files_base = href('artifacts', 'lead', a.path, 'files') %}
      {% set files_raw = href('artifacts', 'lead', a.path, 'files', 'raw') %}
      {% set sections_raw = href('artifacts', 'lead', a.path, 'sections', 'raw') %}
    {% else %}
      {% set dl_href = href('artifacts', 'pin', channel[1:], a.path) %}
      {% set inspect_href = href('artifacts', 'pin', channel[1:], a.path, 'inspect') %}
      {% set files_base = href('artifacts', 'pin', channel[1:], a.path, 'files') %}
      {% set files_raw = href('artifacts', 'pin', channel[1:], a.path, 'files', 'raw') %}
      {% set sections_raw = href('artifacts', 'pin', channel[1:], a.path, 'sections', 'raw') %}
    {% endif %}
    <li class="artifact-row" data-filename="{{ a.path }}" data-inspect="{{ inspect_href }}" data-files="{{ files_base }}" data-files-raw="{{ files_raw }}" data-sections-raw="{{ sections_raw }}">
      <div class="artifact-main">
        <button type="button" class="artifact-open" aria-expanded="false">
          <code>{{ a.path }}</code>
        </button>
        <span class="muted artifact-meta">{{ a.kind.value }} · {{ a.encoding.value }} · {{ a.size|human_size }}</span>
        <div class="artifact-actions">
          <a class="icon-btn download-btn" href="{{ dl_href }}" download="{{ a.path }}" title="Download {{ a.path }}" aria-label="Download {{ a.path }}">
            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
              <path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z"/>
            </svg>
          </a>
          {% if experimental_repl and repl_ready and (a.path.endswith('.wasm') or a.path.endswith('.wasm.zlib') or '.aot' in a.path) %}
          <button type="button" class="icon-btn try-btn" data-mpy-try="{{ name }}"
                  title="Try in µPy shell: import {{ name }}; exports({{ name }})"
                  aria-label="Try {{ name }} in MicroPython shell">
            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
              <path fill="currentColor" d="M8 5.14v14l11-7-11-7Z"/>
            </svg>
          </button>
          {% endif %}
        </div>
      </div>
      <div class="artifact-panel" hidden></div>
    </li>
    {% endfor %}
  </ul>
</section>
{% if entry.contents %}
<section>
  <h2>Package contents (index)</h2>
  <p class="muted">
    {% if entry.contents.name %}pack <code>{{ entry.contents.name }}</code>{% endif %}
    {% if entry.contents.pkg_version %} · {{ entry.contents.pkg_version }}{% endif %}
    · signed={{ entry.contents.signed }}
    · pack={{ entry.contents.has_pack }}
    · source={{ entry.contents.has_source }}
  </p>
</section>
{% endif %}

<dialog id="source-dialog" class="source-dialog">
  <form method="dialog" class="source-dialog-head">
    <strong id="source-dialog-title">Source</strong>
    <div class="source-dialog-actions">
      <a id="source-dialog-download" class="icon-btn" href="#" download title="Download file" aria-label="Download file" hidden>
        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
          <path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z"/>
        </svg>
      </a>
      <button type="submit" class="icon-btn" value="close" aria-label="Close">✕</button>
    </div>
  </form>
  <div id="source-dialog-meta" class="source-dialog-meta muted" hidden></div>
  <pre id="source-dialog-body" class="source-body"></pre>
</dialog>

<script src="{{ href('static', 'vendor', 'highlight.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-python.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-c.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-cpp.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-rust.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-javascript.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-typescript.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-json.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-markdown.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-ini.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-yaml.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-xml.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-bash.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-makefile.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-cmake.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-diff.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-llvm.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-go.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-java.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-sql.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-ruby.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-perl.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-dockerfile.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-lisp.min.js') }}"></script>
<script src="{{ href('static', 'vendor', 'lang-x86asm.min.js') }}"></script>
<script>
(() => {
  const list = document.getElementById("artifact-list");
  if (!list) return;
  const dialog = document.getElementById("source-dialog");
  const dialogTitle = document.getElementById("source-dialog-title");
  const dialogBody = document.getElementById("source-dialog-body");
  const dialogMeta = document.getElementById("source-dialog-meta");
  const dialogDl = document.getElementById("source-dialog-download");
  const HEX_PREVIEW = 65536;

  const DL_SVG = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z"/></svg>`;

  function esc(s) {
    return String(s).replace(/[&<>"']/g, (c) => ({
      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
    })[c]);
  }

  function fmtSize(n) {
    const bytes = Number(n);
    if (!Number.isFinite(bytes) || bytes < 0) return "?";
    const exact = Math.trunc(bytes) + " B";
    if (bytes < 1024) return exact;
    const units = ["KiB", "MiB", "GiB", "TiB"];
    let value = bytes;
    let unit = units[0];
    for (let i = 0; i < units.length; i++) {
      value /= 1024;
      unit = units[i];
      if (value < 1024) break;
    }
    const pretty = value >= 100 ? value.toFixed(0)
      : value >= 10 ? value.toFixed(1)
      : value.toFixed(2);
    return pretty + " " + unit + " (" + exact + ")";
  }

  function guessLang(path) {
    const lower = path.toLowerCase().replace(/\\/g, "/");
    const base = lower.split("/").pop() || lower;
    if (base === "makefile" || base === "gnumakefile" || lower.endsWith(".mk")) return "makefile";
    if (base === "cmakelists.txt" || lower.endsWith(".cmake")) return "cmake";
    if (base === "dockerfile" || base.startsWith("dockerfile.")) return "dockerfile";
    if (lower.endsWith(".py") || lower.endsWith(".pyi")) return "python";
    if (lower.endsWith(".c") || lower.endsWith(".h")) return "c";
    if (lower.endsWith(".cc") || lower.endsWith(".cpp") || lower.endsWith(".cxx")
        || lower.endsWith(".hpp") || lower.endsWith(".hh") || lower.endsWith(".hxx")
        || lower.endsWith(".ipp") || lower.endsWith(".inl")) return "cpp";
    if (lower.endsWith(".rs")) return "rust";
    if (lower.endsWith(".ts") || lower.endsWith(".tsx") || lower.endsWith(".mts") || lower.endsWith(".cts")) return "typescript";
    if (lower.endsWith(".js") || lower.endsWith(".mjs") || lower.endsWith(".cjs") || lower.endsWith(".jsx")) return "javascript";
    if (lower.endsWith(".json") || lower.endsWith(".jsonc") || lower.endsWith(".json5")) return "json";
    if (lower.endsWith(".md") || lower.endsWith(".markdown") || lower.endsWith(".mdx")) return "markdown";
    if (lower.endsWith(".toml") || lower.endsWith(".ini") || lower.endsWith(".cfg")
        || lower.endsWith(".conf") || base === "pack.toml") return "ini";
    if (lower.endsWith(".yml") || lower.endsWith(".yaml")) return "yaml";
    if (lower.endsWith(".xml") || lower.endsWith(".html") || lower.endsWith(".htm")
        || lower.endsWith(".svg") || lower.endsWith(".xhtml")) return "xml";
    if (lower.endsWith(".sh") || lower.endsWith(".bash") || lower.endsWith(".zsh")
        || lower.endsWith(".ksh") || base === ".bashrc" || base === ".profile") return "bash";
    if (lower.endsWith(".diff") || lower.endsWith(".patch")) return "diff";
    if (lower.endsWith(".ll")) return "llvm";
    if (lower.endsWith(".go")) return "go";
    if (lower.endsWith(".java")) return "java";
    if (lower.endsWith(".sql")) return "sql";
    if (lower.endsWith(".rb") || lower.endsWith(".rake")) return "ruby";
    if (lower.endsWith(".pl") || lower.endsWith(".pm")) return "perl";
    if (lower.endsWith(".wat") || lower.endsWith(".wast")) return "lisp";
    if (lower.endsWith(".s") || lower.endsWith(".asm")) return "x86asm";
    return "";
  }

  function fileRow(path, filesBase, filesRaw, metaHtml) {
    const rawUrl = filesRaw + "?path=" + encodeURIComponent(path);
    const base = path.split("/").pop() || path;
    return `<li>
      <button type="button" class="file-link" data-path="${esc(path)}" data-files="${esc(filesBase)}" data-files-raw="${esc(filesRaw)}" title="Open ${esc(path)}">${esc(path)}</button>
      <span class="muted">${metaHtml}</span>
      <a class="icon-btn file-download" href="${esc(rawUrl)}" download="${esc(base)}" title="Download ${esc(path)}" aria-label="Download ${esc(path)}">${DL_SVG}</a>
    </li>`;
  }

  function sectionRow(sec, sectionsRaw) {
    const rawUrl = sectionsRaw + "?index=" + encodeURIComponent(String(sec.index));
    const role = sec.role || "other";
    const roleCls = role === "code" ? " sec-code" : (role === "meta" ? " sec-meta" : "");
    const dlName = (sec.name || ("section_" + sec.index)).replace(/\//g, "_");
    return `<li class="section-row${roleCls}">
      <button type="button" class="section-link" data-index="${esc(sec.index)}" data-name="${esc(sec.name)}" data-sections-raw="${esc(sectionsRaw)}" data-size="${esc(sec.size)}" data-role="${esc(role)}" title="View hex: ${esc(sec.name)}">${esc(sec.name)}</button>
      <span class="muted">${esc(role)} · type=${esc(sec.type_id)} · ${esc(fmtSize(sec.size))}</span>
      <a class="icon-btn file-download" href="${esc(rawUrl)}" download="${esc(dlName)}" title="Download section ${esc(sec.name)}" aria-label="Download section ${esc(sec.name)}">${DL_SVG}</a>
    </li>`;
  }

  function renderInspect(data, filesBase, filesRaw, sectionsRaw) {
    const packFiles = (data.pack && data.pack.files) || [];
    const sourceFiles = (data.source && data.source.files) || [];
    const exports = (data.pack && data.pack.exports) || [];
    const imports = data.imports || [];
    const sections = data.sections || [];
    let html = `<div class="guts">
      <p class="muted">
        kind=<code>${esc(data.kind)}</code>
        · encoding=<code>${esc(data.encoding)}</code>
        · signed=<code>${esc(data.signed)}</code>
        · naked=${esc(fmtSize(data.naked_size))}
        ${data.aot_version != null ? " · aot=" + esc(data.aot_version) : ""}
      </p>`;
    if (data.error) html += `<p class="muted">error: ${esc(data.error)}</p>`;
    if (sections.length) {
      html += `<h3>Sections <span class="muted">(${sections.length})</span></h3>
        <ul class="file-tree">`;
      for (const sec of sections) {
        html += sectionRow(sec, sectionsRaw);
      }
      html += `</ul>`;
    }
    if (data.pack) {
      html += `<h3>Pack <code>${esc(data.pack.name)}</code> (v${esc(data.pack.version)})</h3>
        <ul class="file-tree">`;
      for (const f of packFiles) {
        html += fileRow(f.path, filesBase, filesRaw, `${esc(f.kind)} · ${esc(fmtSize(f.raw_len))}`);
      }
      html += `</ul>`;
      if (exports.length) {
        html += `<h4>Exports</h4><ul class="file-tree">`;
        for (const ex of exports) {
          const typeLabel = ex.typesig || (ex.sig === 255 ? "auto" : ("tag:" + ex.sig));
          html += `<li><code>${esc(ex.export || ex.func)}</code>
            <span class="muted">${esc(typeLabel)}</span></li>`;
        }
        html += `</ul>`;
      }
    }
    if (data.source) {
      html += `<h3>Source tree <code>${esc(data.source.name)}</code> ${esc(data.source.pkg_version || "")}</h3>
        <ul class="file-tree">`;
      for (const f of sourceFiles) {
        html += fileRow(f.path, filesBase, filesRaw, esc(fmtSize(f.raw_len)));
      }
      html += `</ul>`;
    }
    if (imports.length) {
      html += `<h4>Imports <span class="muted">(guest→guest call graph)</span></h4><ul class="file-tree">`;
      for (const im of imports) {
        html += `<li><code>${esc(im.module)}.${esc(im.func)}</code></li>`;
      }
      html += `</ul>`;
    }
    const deps = data.deps || [];
    if (deps.length) {
      html += `<h4>Dependencies <span class="muted">(wasmmod.deps)</span></h4><ul class="file-tree">`;
      for (const d of deps) {
        html += `<li><code>${esc(d.name)}</code> <span class="muted">== ${esc(d.version)}</span></li>`;
      }
      html += `</ul>`;
    }
    if (data.sig) {
      const s = data.sig;
      const fmt = s.format === "mpws"
        ? `MPWS v${esc(s.version ?? "?")}`
        : "raw ECDSA";
      html += `<h3>Signature <code>wasmmod.sig</code></h3>
        <p class="muted">
          format=<code>${fmt}</code>
          · flags=<code>${esc(s.flags)}</code>
          · payload=${esc(fmtSize(s.payload_len))}
        </p>
        <ul class="file-tree">
          <li>digest covers <span class="muted">${esc(fmtSize(s.signed_len))}</span>
            <span class="muted">(module bytes with embedded wasmmod.sig section stripped)</span></li>
          <li>ECDSA sig <span class="muted">${esc(fmtSize(s.sig_len))} · sha256=${esc(s.sig_sha256)}</span></li>
          <li>chain <span class="muted">${esc(fmtSize(s.chain_len))} · ${(s.certs || []).length} cert(s)</span></li>
        </ul>`;
      if ((s.certs || []).length) {
        html += `<h4>Certificate chain</h4><ul class="file-tree">`;
        for (const c of s.certs) {
          const role = c.role === "leaf" ? "leaf" : `intermediate[${c.index}]`;
          html += `<li><code>[${esc(c.index)} ${role}]</code>
            <span class="muted">${esc(fmtSize(c.der_len))} · sha256=${esc(c.sha256)}</span></li>`;
        }
        html += `</ul>`;
      }
    } else if (data.sig_error) {
      html += `<h3>Signature <code>wasmmod.sig</code></h3>
        <p class="muted">error: ${esc(data.sig_error)}</p>`;
    }
    if (!data.pack && !data.source && !data.sig && !data.error && !data.sig_error && !sections.length) {
      html += `<p class="muted">No wasmmod.pack / wasmmod.source / wasmmod.sig sections in this artifact.</p>`;
    }
    html += `</div>`;
    return html;
  }

  function paintHexByte(b) {
    const hx = b.toString(16).padStart(2, "0");
    if (b === 0) return `<span class="hx-null">${hx}</span>`;
    if (b >= 32 && b < 127) return `<span class="hx-print">${hx}</span>`;
    return `<span class="hx-hi">${hx}</span>`;
  }

  function hexdumpHtml(buf, limit) {
    const view = buf.byteLength > limit ? buf.slice(0, limit) : buf;
    const u8 = new Uint8Array(view);
    const width = 16;
    const lines = [];
    for (let i = 0; i < u8.length; i += width) {
      const chunk = u8.subarray(i, i + width);
      const hex = Array.from(chunk, paintHexByte).join(" ");
      const pad = "   ".repeat(width - chunk.length);
      let ascii = "";
      for (const b of chunk) ascii += (b >= 32 && b < 127) ? String.fromCharCode(b) : ".";
      lines.push(
        `<span class="hx-off">${i.toString(16).padStart(8, "0")}</span>  ${hex}${pad}  |${esc(ascii)}|`
      );
    }
    let html = lines.join("\n");
    if (buf.byteLength > limit) {
      html += `\n… showing ${limit} of ${buf.byteLength} bytes`;
    }
    return html;
  }

  function setDownload(rawUrl, filename) {
    dialogDl.hidden = false;
    dialogDl.href = rawUrl;
    dialogDl.setAttribute("download", filename);
  }

  function resetSourceBody(className, text) {
    // hljs 11 refuses to re-highlight if dataset.highlighted is still set.
    delete dialogBody.dataset.highlighted;
    dialogBody.className = className || "source-body";
    dialogBody.textContent = text == null ? "" : text;
  }

  function paintSource(text, lang) {
    delete dialogBody.dataset.highlighted;
    if (window.hljs && lang && window.hljs.getLanguage(lang)) {
      try {
        const out = window.hljs.highlight(text, { language: lang, ignoreIllegals: true });
        dialogBody.className = "source-body hljs language-" + lang;
        dialogBody.innerHTML = out.value;
        dialogBody.dataset.highlighted = "yes";
        return;
      } catch (err) {
        console.warn("hljs highlight failed", lang, err);
      }
    }
    dialogBody.className = "source-body" + (lang ? (" language-" + lang) : "");
    dialogBody.textContent = text;
  }

  async function openSource(filesBase, filesRaw, path) {
    dialogTitle.textContent = path;
    resetSourceBody("source-body", "Loading…");
    dialogMeta.hidden = true;
    dialogMeta.textContent = "";
    setDownload(filesRaw + "?path=" + encodeURIComponent(path), path.split("/").pop() || path);
    dialog.showModal();

    const metaUrl = filesBase + "?path=" + encodeURIComponent(path);
    const res = await fetch(metaUrl, { headers: { Accept: "application/json" } });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      resetSourceBody("source-body", data.detail || ("failed (" + res.status + ")"));
      return;
    }

    const isBinary = !!(data.binary || data.text == null);
    dialogMeta.hidden = false;
    dialogMeta.textContent =
      (isBinary ? "binary" : "text") +
      " · " + fmtSize(data.size || 0) +
      " · section " + (data.section || "?") +
      (data.kind ? (" · kind " + data.kind) : "");

    if (!isBinary) {
      paintSource(data.text, guessLang(path));
      return;
    }

    const rawUrl = filesRaw + "?path=" + encodeURIComponent(path);
    const rawRes = await fetch(rawUrl, { headers: { Accept: "application/octet-stream" } });
    if (!rawRes.ok) {
      resetSourceBody(
        "source-body",
        `(binary ${fmtSize(data.size || 0)} — download failed ${rawRes.status})`
      );
      return;
    }
    const buf = await rawRes.arrayBuffer();
    delete dialogBody.dataset.highlighted;
    dialogBody.className = "source-body hex-body";
    dialogBody.innerHTML = hexdumpHtml(buf, HEX_PREVIEW);
  }

  async function openSection(sectionsRaw, index, name, size, role) {
    const title = name || ("section_" + index);
    dialogTitle.textContent = title;
    resetSourceBody("source-body", "Loading…");
    dialogMeta.hidden = false;
    dialogMeta.textContent =
      "container section · " + (role || "other") +
      " · index " + index +
      " · " + fmtSize(size || 0);
    const rawUrl = sectionsRaw + "?index=" + encodeURIComponent(String(index));
    setDownload(rawUrl, title.replace(/\//g, "_"));
    dialog.showModal();

    const rawRes = await fetch(rawUrl, { headers: { Accept: "application/octet-stream" } });
    if (!rawRes.ok) {
      const err = await rawRes.json().catch(() => ({}));
      resetSourceBody(
        "source-body",
        err.detail || ("failed to load section (" + rawRes.status + ")")
      );
      return;
    }
    const buf = await rawRes.arrayBuffer();
    delete dialogBody.dataset.highlighted;
    dialogBody.className = "source-body hex-body";
    dialogBody.innerHTML = hexdumpHtml(buf, HEX_PREVIEW);
  }

  list.addEventListener("click", async (ev) => {
    if (ev.target.closest(".file-download") || ev.target.closest(".download-btn") || ev.target.closest(".try-btn")) return;
    const secBtn = ev.target.closest(".section-link");
    if (secBtn) {
      ev.preventDefault();
      openSection(
        secBtn.dataset.sectionsRaw,
        Number(secBtn.dataset.index),
        secBtn.dataset.name,
        Number(secBtn.dataset.size),
        secBtn.dataset.role
      );
      return;
    }
    const fileBtn = ev.target.closest(".file-link");
    if (fileBtn) {
      ev.preventDefault();
      openSource(fileBtn.dataset.files, fileBtn.dataset.filesRaw, fileBtn.dataset.path);
      return;
    }
    const openBtn = ev.target.closest(".artifact-open");
    if (!openBtn) return;
    const row = openBtn.closest(".artifact-row");
    const panel = row.querySelector(".artifact-panel");
    const expanded = openBtn.getAttribute("aria-expanded") === "true";
    if (expanded) {
      openBtn.setAttribute("aria-expanded", "false");
      panel.hidden = true;
      return;
    }
    openBtn.setAttribute("aria-expanded", "true");
    panel.hidden = false;
    if (!panel.dataset.loaded) {
      panel.innerHTML = `<p class="muted">Inspecting…</p>`;
      try {
        const res = await fetch(row.dataset.inspect, { headers: { Accept: "application/json" } });
        const data = await res.json();
        if (!res.ok) throw new Error(data.detail || res.status);
        panel.innerHTML = renderInspect(
          data, row.dataset.files, row.dataset.filesRaw, row.dataset.sectionsRaw
        );
        panel.dataset.loaded = "1";
      } catch (err) {
        panel.innerHTML = `<p class="muted">Inspect failed: ${esc(err.message || err)}</p>`;
      }
    }
  });
})();
</script>
{% endblock %}