{{- with site.Params.comments.remark42 -}}
<div id="remark42"></div>
<script>
  var remark_config = {
    host: '{{ .host }}',
    site_id: '{{ .site_id }}',
    max_shown_comments: 15,
    theme: 'light',
    page_title: '{{ $.Title }}',
    locale: '{{ with site.Params.locale }}{{ if hasPrefix . "zh" }}zh{{ else }}{{ . }}{{ end }}{{ else }}zh{{ end }}',
    custom_css: '{{ site.BaseURL }}css/remark42.css',
  };
</script>
<script src="{{ .host }}/web/embed.js"></script>
<script>
  (function () {
    function getRemark42Theme() {
      var stored = localStorage.getItem('color-theme');
      if (stored === 'light' || stored === 'dark') return stored;
      if (stored === 'system') {
        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      }
      var defaultTheme = '{{ site.Params.theme.default }}';
      if (defaultTheme === 'light' || defaultTheme === 'dark') return defaultTheme;
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }

    function setRemark42Theme() {
      var frame = document.querySelector('iframe#remark42-frame');
      if (frame && frame.contentWindow) {
        frame.contentWindow.postMessage(
          { theme: getRemark42Theme() },
          remark_config.host
        );
      }
    }

    remark_config.theme = getRemark42Theme();

    window.addEventListener('message', function (e) {
      if (e.data && e.data.remark42) {
        setRemark42Theme();
      }
    });

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setRemark42Theme);

    var toggles = document.querySelectorAll('.hextra-theme-toggle-options [data-item]');
    if (toggles) {
      toggles.forEach(function (toggle) {
        toggle.addEventListener('click', function () {
          setTimeout(setRemark42Theme, 200);
        });
      });
    }

    // Remove "Powered by Remark42" branding
    function removeBranding() {
      var frame = document.querySelector('iframe#remark42-frame');
      if (!frame || !frame.contentDocument) return;
      var doc = frame.contentDocument;
      // Try multiple known selectors for the branding element
      var selectors = [
        'a[href*="remark42"]',
        'a[href*="remark42.com"]',
        '.powered-by',
        '.remark42 .footer a',
        'footer a',
      ];
      selectors.forEach(function (sel) {
        doc.querySelectorAll(sel).forEach(function (el) {
          el.style.display = 'none';
        });
      });
      // Also hide any parent container that only contains the branding
      doc.querySelectorAll('.powered-by, .footer').forEach(function (el) {
        if (el.children.length === 0 || el.textContent.trim().indexOf('Remark42') !== -1) {
          el.style.display = 'none';
        }
      });
    }

    // Observe iframe content changes to catch dynamically rendered branding
    function observeBranding() {
      var frame = document.querySelector('iframe#remark42-frame');
      if (!frame || !frame.contentDocument) return;
      var observer = new MutationObserver(function () {
        removeBranding();
      });
      observer.observe(frame.contentDocument.body, { childList: true, subtree: true });
    }

    // Run on iframe load and also poll briefly in case it loads fast
    var frame = document.querySelector('iframe#remark42-frame');
    if (frame) {
      frame.addEventListener('load', function () {
        removeBranding();
        observeBranding();
      });
    }
    setTimeout(removeBranding, 2000);
    setTimeout(removeBranding, 5000);
  })();
</script>
{{- else -}}
  {{ warnf "remark42 is not configured" }}
{{- end -}}