{{ $lang := .Lang }}
<div class="giscus"></div>
<script>
  function getGiscusTheme() {
    const rootTheme = document.documentElement.dataset.theme;
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const isDark = rootTheme === "dark" || (rootTheme === "auto" && prefersDark);
    return isDark ? "noborder_gray" : "noborder_light";
  }

  function setGiscusTheme(theme) {
    const iframe = document.querySelector("iframe.giscus-frame");
    if (!iframe) return;
    iframe.contentWindow.postMessage(
      { giscus: { setConfig: { theme: theme } } },
      "https://giscus.app"
    );
  }

  window.addEventListener("load", function() {
    const script = document.createElement("script");
    script.src = "https://giscus.app/client.js";
    script.crossOrigin = "anonymous";
    script.async = true;
    script.setAttribute("data-repo", "16bit-ykiko/about-me");
    script.setAttribute("data-repo-id", "R_kgDOLNvUfQ");
    script.setAttribute("data-category", "Announcements");
    script.setAttribute("data-category-id", "DIC_kwDOLNvUfc4Ckzfl");
    script.setAttribute("data-mapping", "title");
    script.setAttribute("data-strict", "0");
    script.setAttribute("data-reactions-enabled", "1");
    script.setAttribute("data-emit-metadata", "0");
    script.setAttribute("data-input-position", "top");
    script.setAttribute("data-theme", getGiscusTheme());
    script.setAttribute("data-lang", "{{ if eq $lang "zh-cn" }}zh-CN{{ else }}en{{ end }}");
    document.querySelector(".giscus").appendChild(script);

    const themeToggle = document.getElementById("theme-toggle");
    if (themeToggle) {
      themeToggle.addEventListener("click", function() {
        window.setTimeout(function() {
          setGiscusTheme(getGiscusTheme());
        }, 0);
      });
    }
  });
</script>