(async () => {
    let el = document.getElementById("comment-section")
    if (el == null) {
        return
    }

    let status_url = `https://hachyderm.io/api/v1/statuses/${el.getAttribute("data-status")}/context`
    let comments = await (await fetch(status_url)).json()

    if (comments["descendants"] == null || comments["descendants"].length === 0) {
        el.innerHTML = `<div class="no-comments">No comments yet</div>`
        return
    }

    for (let comment of comments["descendants"]) {
        let date = new Date(comment.created_at).toLocaleDateString(navigator.language || "en-GB", {
            day: "2-digit",
            year: "numeric",
            month: "long",
            hour: "2-digit",
            minute: "2-digit",
        })
        let sanitize = DOMPurify.sanitize
        let comment_html =
            `
                    <div class="comment">
                        <div class="comment-author">
                            <img class="comment-author-image" src="${sanitize(comment.account.avatar)}" alt="Profile picture of ${sanitize(comment.account.display_name)}">
                            <div class="comment-author-data">
                                <div>
                                    <span class="comment-author-name"><a class="comment-author-link" href="${comment.account.url}">${sanitize(comment.account.display_name)}</a></span>
                                </div>
                                <a href="${sanitize(comment.uri)}"><time datetime="${sanitize(comment.created_at)}">${date}</time></a>
                            </div>
                        </div>
                        <div class="comment-content">
                            ${sanitize(comment.content)}
                        </div>
                    </div>
`
        el.innerHTML += comment_html
    }
})()