{{ with .Params.comments }}
<div class="article-content">
  {{ $icon := index $.Site.Data.fontawesome.icons "comments" }}
  {{ $svg := $icon.svg.solid | default $icon.svg.regular | default $icon.svg.brands }}
  <h2><span class="icons">{{ safeHTML $svg.raw }}</span> {{ i18n "Comments" . }}</h2>
  <p>
    {{ i18n "Use_fediverse_account" . | safeHTML }}
  </p>
  <p id="mastodon-comments-list"><button id="load-comment">{{ i18n "Load_comments" . }}</button></p>
  <noscript><p>You need JavaScript to view the comments.</p></noscript>
  <script src="/js/purify.min.js"></script>
  <script type="text/javascript">
    function escapeHtml(unsafe) {
      return unsafe
           .replace(/&/g, "&amp;")
           .replace(/</g, "&lt;")
           .replace(/>/g, "&gt;")
           .replace(/"/g, "&quot;")
           .replace(/'/g, "&#039;");
   }

    document.getElementById("load-comment").addEventListener("click", function() {
      document.getElementById("load-comment").innerHTML = "Loading";
      fetch('https://{{ .host }}/api/v1/statuses/{{ .id }}/context')
        .then(function(response) {
          return response.json();
        })
        .then(function(data) {
          if(data['descendants'] &&
             Array.isArray(data['descendants']) && 
            data['descendants'].length > 0) {
              document.getElementById('mastodon-comments-list').innerHTML = "";
              data['descendants'].forEach(function(reply) {
                reply.account.display_name = escapeHtml(reply.account.display_name);
                reply.account.emojis.forEach(emoji => {
                  reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
                    `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
                });
                reply.media_previews='';
                if(typeof reply.media_attachments !== "undefined") {
                  reply.media_attachments.forEach(media => {
                    if(typeof media.preview_url !== "undefined" && typeof media.type !== "undefined" && media.type=="image")
                      reply.media_previews+='<img src="'+media.preview_url+'" /> ';
                  });
                }
                mastodonComment =
                  `<div class="mastodon-container" id="${reply.id}">
                   <div class="mastodon-comment">
                     <div class="avatar">
                       <img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
                     </div>
                     <div class="content">
                       <div class="author">
                         <a class="date" href="${reply.uri}" rel="nofollow">
                           ${reply.created_at.substr(0, 10)} ${reply.created_at.substr(11, 5)} ${reply.created_at.substr(-1)}
                         </a>
                         <a href="${reply.account.url}" rel="nofollow">
                           <span>${reply.account.display_name}</span>
                           <span class="disabled">/ @${escapeHtml(reply.account.acct)}</span>
                         </a>
                       </div>
                       <div class="mastodon-comment-content">${reply.content}</div> 
                       <div class="mastodon-comment-media">${reply.media_previews}</div> 
                     </div>
                   </div>
                   </div>`;
                reply_to_id = reply.in_reply_to_id;
                parentComment = document.getElementById(reply_to_id);
                if(parentComment !== null)
                  parentComment.appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
                else
                  document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
              });
          } else {
            document.getElementById('mastodon-comments-list').innerHTML = "<p>{{ i18n "No_comment" . }}</p>";
          }
        });
      });
  </script>
</div>
{{ end }}