function escapeHtml(unsafe) {
	return unsafe
	.replace(/&/g, "&")
	.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://<TMPL_VAR mastodon_host>/api/v1/statuses/<TMPL_VAR mastodon_post>/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 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="post" href="${reply.uri}" rel="nofollow">
									<time datetime="${reply.created_at}" pubdate="pubdate">
										${reply.created_at.replace(/(T\d+:\d+):\d+(\.\d+)?(.*)/, "$1$3")}
									</time>
								</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>";
		}
	});
});