{{ define "main" }}
    <h2>{{ .Title }}</h2>

    <div>
    {{ .Content }}
    </div>

    {{ $related := .Site.RegularPages.Related . | first 5 }}
    {{ with $related }}
        <h3>See Also</h3>
        <ul>
            {{ range . }}
                <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
            {{ end }}
        </ul>
    {{ end }}

    <h3>Contact Me</h3>

    You can send me an <a href="mailto:josh@redstrate.com">e-mail</a>.

    {{ with .Params.comments }}
    <h3>Comments</h3>
    <p>I <a href="https://{{ .host }}/@{{ .username }}/{{ .id }}">posted this</a> to my Mastodon! You can use any Fediverse account (Mastodon, Pleroma, etc) to <a class="button" href="https://{{ .host }}/interact/{{ .id }}?type=reply">reply</a>.</p>
    <p id="mastodon-comments-list"><button id="load-comment">Load comments</button></p>
    <noscript><p>You need JavaScript to view the comments.</p></noscript>
    {{ $domscript := resources.Get "js/purify.min.js" }}
    <script src="{{ $domscript.Permalink }}" type="text/javascript"></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" />`);
                    });
                    mastodonComment =
                    `<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 href="${reply.account.url}" rel="nofollow">
                            <span>${reply.account.display_name}</span>
                            <span class="disabled">${escapeHtml(reply.account.acct)}</span>
                            </a>
                            <a class="date" href="${reply.uri}" rel="nofollow">
                            ${reply.created_at.substr(0, 10)}
                            </a>
                        </div>
                        <div class="mastodon-comment-content">${reply.content}</div>
                        </div>
                    </div>`;
                    document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
                });
            } else {
                document.getElementById('mastodon-comments-list').innerHTML = "<p>Not comments found</p>";
            }
            });
        });
    </script>
    {{ end }}
{{ end }}