<div class="comments-switch" style="display:flex;gap:.5rem;margin:.5rem 0 1rem;">
  <button id="btn-isso" type="button" aria-pressed="true">Anonymous (Isso)</button>
  <button id="btn-giscus" type="button" aria-pressed="false">GitHub (Giscus)</button>
  <a href="https://github.com/AlipourIm/blog-comments/discussions/categories/comments" target="_blank" rel="noopener">Open on GitHub ↗</a>
</div>



<!-- Giscus panel (lazy-loaded) -->
<div id="panel-giscus" style="display:none">
  <section id="giscus-thread"></section>
</div>

<!-- Isso panel (default) -->
<div id="panel-isso">
  <section id="isso-thread"
           data-isso-id="{{ .RelPermalink }}"
           data-title="{{ .Title | htmlEscape }}">
    <noscript>Javascript needs to be activated to view comments.</noscript>
  </section>
  <script
    src="/isso/js/embed.min.js"
    data-isso="/isso/"
    data-isso-css="false"
    data-isso-lang="en"
    data-isso-max-comments-nested="5"
    data-isso-sorting="newest"
    async>
  </script>
  <small class="isso-powered" style="display:block;margin:.5rem 0;color:var(--secondary,#888)">
    Comments powered by <a href="https://isso-comments.de" target="_blank" rel="noopener">Isso</a>
  </small>
</div>

<script>
(function () {
  var panelIsso = document.getElementById('panel-isso');
  var panelGisc = document.getElementById('panel-giscus');
  var issoBtn = document.getElementById('btn-isso');
  var giscBtn = document.getElementById('btn-giscus');
  var gLoaded = false;

  function isDark() {
    var pref = localStorage.getItem('pref-theme');   // PaperMod uses this
    if (pref === 'dark')  return true;
    if (pref === 'light') return false;

    var html = document.documentElement, body = document.body;
    if (
      (html.classList && html.classList.contains('dark')) ||
      (body.classList && body.classList.contains('dark')) ||
      html.getAttribute('data-theme') === 'dark' ||
      body.getAttribute('data-theme') === 'dark' ||
      (html.classList && html.classList.contains('theme-dark')) ||
      (body.classList && body.classList.contains('theme-dark'))
    ) return true;

    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  }
  function gTheme(){ return isDark() ? 'dark_dimmed' : 'noborder_light'; }

  function loadGiscus() {
    if (gLoaded) return;
    var s = document.createElement('script');
    s.src = 'https://giscus.app/client.js';
    s.async = true;
    s.crossOrigin = 'anonymous';
    s.setAttribute('data-repo','AlipourIm/blog-comments');
    s.setAttribute('data-repo-id','R_kgDOQGARyA');
    s.setAttribute('data-category','Comments');
    s.setAttribute('data-category-id','DIC_kwDOQGARyM4Cw3x-');
    s.setAttribute('data-mapping','pathname');
    s.setAttribute('data-strict','0');
    s.setAttribute('data-reactions-enabled','1');
    s.setAttribute('data-emit-metadata','0');
    s.setAttribute('data-input-position','bottom');
    s.setAttribute('data-lang','en');
    s.setAttribute('data-theme', gTheme());
    document.getElementById('giscus-thread').appendChild(s);

    function reTheme(){
      var iframe = document.querySelector('iframe.giscus-frame');
      if (iframe && iframe.contentWindow) {
        iframe.contentWindow.postMessage(
          { giscus: { setConfig: { theme: gTheme() } } },
          'https://giscus.app'
        );
      }
    }

    var tbtn = document.getElementById('theme-toggle');
    if (tbtn) tbtn.addEventListener('click', function(){ setTimeout(reTheme, 0); });

    var mo = new MutationObserver(function(){ reTheme(); });
    mo.observe(document.documentElement, { attributes:true, attributeFilter:['class','data-theme'] });
    mo.observe(document.body,             { attributes:true, attributeFilter:['class','data-theme'] });

    gLoaded = true;
  }

  function show(which) {
    var showIsso = which === 'isso';
    panelIsso.style.display = showIsso ? 'block' : 'none';
    panelGisc.style.display = showIsso ? 'none'  : 'block';
    if (issoBtn) issoBtn.setAttribute('aria-pressed', showIsso ? 'true' : 'false');
    if (giscBtn) giscBtn.setAttribute('aria-pressed', showIsso ? 'false' : 'true');
    if (!showIsso) loadGiscus();
  }

  if (issoBtn) issoBtn.addEventListener('click', function(e){ e.preventDefault(); show('isso'); });
  if (giscBtn) giscBtn.addEventListener('click', function(e){ e.preventDefault(); show('giscus'); });

  // default view
  show('isso');
})();
</script>

