<div class="container">
    <article>
        <section class="post-header">
            <h1 class="post-title">$title$</h1>
            Posted on $date$ $if(tags)$ - filed under: $tags$ $endif$
        </section>
        <section class="post-body">
            $body$
        </section>
    </article>
    $if(githubIssueId)$
    <hr />
    <comments>
        <h3>Comments</h3>
        <a
            class="button button-outline add-comment"
            href="https://github.com/pyrho/25.wf-comments/issues/$githubIssueId$#new_comment_field"
            target="_blank"
            >Comment on github</a
        >
        <br />
    </comments>
    $endif$
</div>
$if(githubIssueId)$
<script type="text/javascript">
    function domReady(fn) {
        document.addEventListener('DOMContentLoaded', fn);
        if (document.readyState === 'interactive' || document.readyState === 'complete') {
            fn();
        }
    }

    async function getComments(url = '') {
        const response = await fetch(url, {
            method: 'GET',
            mode: 'cors',
            cache: 'no-cache',
            headers: { Accept: 'application/vnd.github.v3.html+json' },
        });
        return response.json();
    }

    domReady(() => {
        const apiUrl =
            'https://api.github.com/repos/pyrho/25.wf-comments/issues/$githubIssueId$/comments';
        const appendComments = function (comments) {
            const commentSection = document.querySelector('comments');
            if (!comments || !comments.forEach || comments.length === 0) {
                commentSection.insertAdjacentHTML('beforeend', '<p>No comments yet.</p>');
                return;
            }
            comments.forEach(function (comment) {
                commentSection.insertAdjacentHTML(
                    'beforeend',
                    '<div class="comment"> ✿\
            <a class="commenter" href="' +
                        comment.user.html_url +
                        '"\
              target="_blank">' +
                        comment.user.login +
                        '</a> on ' +
                        new Date(comment.created_at).toUTCString() +
                        comment.body_html +
                        '</div>',
                );
            });
        };
        getComments(apiUrl).then(appendComments);
    });
</script>
$endif$