{{ if .Site.Params.comments.enabled }}

  <section id="email-comments">
    <p>If you want to start a discussion about this topic, you can send me an <strong><a href="mailto:{{ $.Site.Params.comments.commentsEmail }}?subject={{ replace (printf "Re: %s" $.Page.Title) "\"" "'" }}">e-mail: <i>blog@rennerocha.com</i></a></strong> ✉️</p>
  </section>

  {{ if .Params.mastodon_id}}
  <section id="mastodon-comments">
    <h4>Comments</h4>
    <div class="comment-ingress">
      Comment by replying to <strong><a href="https://chaos.social/@rennerocha/{{ .Params.mastodon_id }}">this post on Mastodon</a></strong>.
    </div>

    <div id="comments" data-id="{{ .Params.mastodon_id }}">
      <p>Loading comments...</p>
    </div>

    <div class="continue-discussion">
      <p>Continue discussion on <a href="https://chaos.social/@rennerocha/{{ .Params.mastodon_id }}">Fediverse</a> &#187;</p>
    </div>
  </section>

  <template id="comment-template">
    <hr />
    <article class="blog-comment" style="display: grid; grid-template-columns: 10% 90%;">
      <div>
        <img />
      </div>
      <div class="comment-content">
        <div class="author" style="font-size: smaller; font-weight: bold"></div>
        <div class="publish-date" style="font-size: smaller; font-weight: lighter; font-style: italic;"></div>
        <div class="comment" style="font-size: larger; font-weight: bold"></div>
      </div>
    </article>
  </template>

  <script type="text/javascript">
    function renderComment(comment, target, parentId) {
      const node = document
        .querySelector("template#comment-template")
        .content.cloneNode(true);

      const author = node.querySelector(".author");

      let mastodonAcct = comment.account.acct;
      if (mastodonAcct === "rennerocha") {
        mastodonAcct = "rennerocha@chaos.social";
      }

      let in_reply_to_id = comment.in_reply_to_id;

      author.innerHTML = `<a href="${comment.account.url}" target=_blank>${comment.account.display_name} (${mastodonAcct})</a>`;

      const commentContainer = node.querySelector(".blog-comment");
      if (in_reply_to_id !== parentId) {
        commentContainer.classList.add("indent");
      }

      const publishDate = node.querySelector(".publish-date");
      const dateObj = new Date(comment.created_at);

      const dateTime = `${dateObj.getDate()}.${
        dateObj.getMonth() + 1
      }.${dateObj.getFullYear()} ${dateObj.getHours()}:${dateObj.getMinutes()}`;

      publishDate.innerHTML = `<a href="${comment.url}" target=_blank>${dateTime}</a>`;

      const userComment = node.querySelector(".comment");
      userComment.innerHTML = comment.content;

      const avatar = node.querySelector("img");
      avatar.src = comment.account.avatar_static;
      avatar.setAttribute("width", "50");
      avatar.setAttribute("height", "50");

      target.appendChild(node);
    }

    async function renderComments() {
      const commentsNode = document.querySelector("#comments");

      const mastodonPostId = commentsNode.dataset?.id;

      if (!mastodonPostId) {
        return;
      }

      commentsNode.innerHTML = "";

      const originalPost = await fetch(
        `https://chaos.social/api/v1/statuses/${mastodonPostId}`
      );
      const originalData = await originalPost.json();
      renderComment(originalData, commentsNode, null);

      const response = await fetch(
        `https://chaos.social/api/v1/statuses/${mastodonPostId}/context`
      );
      const data = await response.json();
      const comments = data.descendants;

      comments.forEach((comment) => {
        renderComment(comment, commentsNode, mastodonPostId);
      });
    }

    renderComments();
</script>

{{ end }}

{{ end }}