{{ if .Site.Params.comments.system }}
<div class="px-2 mb-2 max-w-5xl mx-auto">
  {{ if eq .Site.Params.comments.system "cactus.chat" }}
    <script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
    <link rel="stylesheet" href="https://latest.cactus.chat/style.css" type="text/css">
    <style>
      :root {
        --cactus-button-color: #647eff;
      }
      :root.dark {
        --cactus-button-color: #647eff;
        --cactus-border-color: darkgrey;
        --cactus-text-color: white;
        --cactus-text-color--soft: lightgray;
        --cactus-button-text-color: white;
      }
      .cactus-comment-displayname {
        font-weight: bold;
        cursor: pointer;
        /* todo: remove after using all: unset */
        text-decoration: none;
        color: inherit !important;
      }      
    </style>
    <div id="comment-section"></div>
    <script>
      initComments({
        node: document.getElementById("comment-section"),
        defaultHomeserverUrl: "https://matrix.cactus.chat:8448",
        serverName: "cactus.chat",
        siteName: "{{ .Site.Params.comments.siteName }}",
        commentSectionId: "{{ .Permalink | md5 }}"
      })
      </script>
      
  {{ end }}
</div>
{{ end }}