<% if (
        theme.comment.system==='giscus' &&
        theme.comment.config.giscus.repo &&
        theme.comment.config.giscus.repo_id &&
        theme.comment.config.giscus.category_id
    ) { %>
    <div id="giscus-container"></div>
    <script <%= theme.global.single_page === true && 'data-swup-reload-script' %> defer>
        (function() {
            const containerId = "giscus-container";
            const mapping = "<%= theme.comment.config.giscus.mapping || 'pathname' %>";
            const lang = "<%= theme.comment.config.giscus.lang || 'en' %>";
            const inputPosition = "<%= theme.comment.config.giscus.input_position || 'bottom' %>";
            const reactionsEnabled = "<%= theme.comment.config.giscus.reactions_enabled || '1' %>" === "1";
            const emitMetadata = "<%= theme.comment.config.giscus.emit_metadata || '1' %>" === "1";
            const strict = "<%= theme.comment.config.giscus.strict || '0' %>" === "1";
            const loading = "<%= theme.comment.config.giscus.loading || 'lazy' %>";

            const getTerm = () => {
                if (mapping === "pathname") return location.pathname;
                if (mapping === "url") return location.href;
                if (mapping === "title") return document.title;
                if (mapping === "og:title") {
                    const ogTitle = document.querySelector("meta[property='og:title']");
                    return ogTitle?.content || document.title;
                }
                return "";
            };

            const sendUpdate = () => {
                const iframe = document.querySelector("iframe.giscus-frame");
                if (!iframe) {
                    return;
                }

                const setConfig = {
                    theme: "preferred_color_scheme",
                    lang,
                    inputPosition,
                    reactionsEnabled,
                    emitMetadata,
                    strict,
                };

                if (mapping !== "number") {
                    const term = getTerm();
                    if (term) {
                        setConfig.term = term;
                    }
                }

                iframe.contentWindow.postMessage(
                    { giscus: { setConfig } },
                    "https://giscus.app",
                );
            };

            const loadGiscus = () => {
                const container = document.getElementById(containerId);
                if (!container) {
                    return;
                }

                const iframe = container.querySelector("iframe.giscus-frame");
                if (iframe) {
                    sendUpdate();
                    return;
                }

                if (container.dataset.giscusInit === "true") {
                    return;
                }

                const giscusConfig = {
                    src: "https://giscus.app/client.js",
                    "data-repo": "<%= theme.comment.config.giscus.repo %>",
                    "data-repo-id": "<%= theme.comment.config.giscus.repo_id %>",
                    "data-category": "<%= theme.comment.config.giscus.category %>",
                    "data-category-id": "<%= theme.comment.config.giscus.category_id %>",
                    "data-mapping": mapping,
                    "data-strict": "<%= theme.comment.config.giscus.strict || '0' %>",
                    "data-reactions-enabled": "<%= theme.comment.config.giscus.reactions_enabled || '1' %>",
                    "data-emit-metadata": "<%= theme.comment.config.giscus.emit_metadata || '1' %>",
                    "data-theme": "preferred_color_scheme",
                    "data-lang": lang,
                    "data-input-position": inputPosition,
                    "data-loading": loading,
                    crossorigin: "anonymous",
                    async: true,
                };

                const giscusScript = document.createElement("script");
                for (const key in giscusConfig) {
                    giscusScript.setAttribute(key, giscusConfig[key]);
                }
                container.appendChild(giscusScript);
                container.dataset.giscusInit = "true";
            };

            const runGiscus = () => {
                const container = document.getElementById(containerId);
                if (!container) {
                    return;
                }

                if (container.querySelector("iframe.giscus-frame")) {
                    sendUpdate();
                    return;
                }

                loadGiscus();
            };

            runGiscus();
        })();
    </script>
<% } %>
