{% if page.meta.comments %}
  <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>

{% if build %}
  <!-- Insert generated snippet here -->
  <script src="https://giscus.app/client.js"
        data-repo="{{ config.theme.comments.data_repo }}"
        data-repo-id="{{ config.theme.comments.data_repo_id }}"
        data-category="{{ config.theme.comments.data_category }}"
        data-category-id="{{ config.theme.comments.data_category_id }}"
        data-mapping="pathname"
        data-strict="1"
        data-reactions-enabled="1"
        data-emit-metadata="1"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="ca"
        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"
        ? "transparent_dark"
        : "light"

      // Instruct Giscus to set theme
      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"
            ? "transparent_dark"
            : "light"

          // Instruct Giscus to change theme
          var frame = document.querySelector(".giscus-frame")
          frame.contentWindow.postMessage(
            { giscus: { setConfig: { theme } } },
            "https://giscus.app"
          )
        }
      })
    })
  </script>
{% else %}
<p>Diponibles en producció.</p>
<p>Paràmetres:</p>
<ul>
  <li><code>comments-data-repo</code>: {{ config.theme.comments.data_repo }}</li>
  <li><code>comments-data-repo-id</code>: {{ config.theme.comments.data_repo_id }}</li>
  <li><code>comments-data-category</code>: {{ config.theme.comments.data_category }}</li>
  <li><code>comments-data-category-id</code>: {{ config.theme.comments.data_category_id }}</li>
</ul>
{% endif %}
{% endif %}