{% if page.meta.comments %}
<h2{% if not page.meta.comments_anchor %} id="__comments" {% endif %}>{{ lang.t("meta.comments") }}</h2>
    <script src="https://giscus.app/client.js" data-repo="srl-labs/containerlab"
        data-repo-id="MDEwOlJlcG9zaXRvcnkyOTA5NjA1MjE=" data-category="comments" data-category-id="DIC_kwDOEVe0ic4CWivD"
        data-mapping="title" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0"
        data-input-position="bottom" data-theme="preferred_color_scheme" data-lang="en" data-loading="lazy"
        crossorigin="anonymous" async>
        </script>

    <!-- Synchronize Giscus theme with palette -->
    <script>
        var giscus = document.querySelector("script[src*=giscus]")

        /* Set palette on initial load */
        var palette = __md_get("__palette")
        if (palette && typeof palette.color === "object") {
            var theme = palette.color.scheme === "slate" ? "dark" : "light"
            giscus.setAttribute("data-theme", theme)
        }

        /* Register event handlers after documented loaded */
        document.addEventListener("DOMContentLoaded", function () {
            var ref = document.querySelector("[data-md-component=palette]")
            ref.addEventListener("change", function () {
                var palette = __md_get("__palette")
                if (palette && typeof palette.color === "object") {
                    var theme = palette.color.scheme === "slate" ? "dark" : "light"

                    /* Instruct Giscus to change theme */
                    var frame = document.querySelector(".giscus-frame")
                    frame.contentWindow.postMessage(
                        { giscus: { setConfig: { theme } } },
                        "https://giscus.app"
                    )
                }
            })
        })
    </script>
    {% endif %}