<script>
	const GH_API_URL = 'https://api.github.com/repos/HevaWu/HevaWu.github.io/issues/95/comments';

	let request = new XMLHttpRequest();
	request.open('GET', GH_API_URL, true, 'cb2f4de099485f543dd9', '51f265e652aebde62fdfd0b6499a6452f3f35329');
	request.onload = function () {
		if (this.status >= 200 && this.status < 400) {
			let response = JSON.parse(this.response);

			for (var i = 0; i < response.length; i++) {
				document.getElementById('gh-comments-list').appendChild(createCommentEl(response[i]));
			}

			if (0 === response.length) {
				document.getElementById('gh-comments-list').appendChild(noCommentEl());
			}
		} else {
			console.error(this);
		}
	};

	function noCommentEl() {
		let noComment = document.createElement('p')
		noComment.classList.add("gh-no-comment");
		noComment.innerText = "No comments found for this article."

		return noComment
	}

	function createCommentEl(response) {

		// Header

		let commentHeader = document.createElement('div');
		commentHeader.classList.add('comment-header');

		let user = document.createElement('a');
		user.setAttribute('href', response.user.url.replace('api.github.com/users', 'github.com'));
		user.classList.add('user');

		let userAvatar = document.createElement('img');
		userAvatar.classList.add('avatar');
		userAvatar.setAttribute('src', response.user.avatar_url);

		user.appendChild(userAvatar);
		user.appendChild(document.createTextNode(" " + response.user.login + " "))

		let commentDateWithURL = document.createElement('a');
		commentDateWithURL.setAttribute('href', response.html_url);
		commentDateWithURL.classList.add('comment-url');
		commentDateWithURL.innerHTML = response.created_at;

		commentHeader.appendChild(user);
		commentHeader.appendChild(document.createTextNode(" Commented On "));
		commentHeader.appendChild(commentDateWithURL);

		// Content

		let commentContents = document.createElement('div');
		commentContents.classList.add('comment-content');

		let commentContentP = document.createElement('p');
		commentContentP.innerHTML = response.body;

		commentContents.appendChild(commentContentP);

		// Append to li

		let comment = document.createElement('li');
		comment.setAttribute('data-created', response.created_at);
		comment.setAttribute('data-author-avatar', response.user.avatar_url);
		comment.setAttribute('data-user-url', response.user.url);

		comment.appendChild(commentHeader);
		comment.appendChild(commentContents);

		return comment;
	}
	request.send();
</script>

<div class="github-comments">
	<h2>Comments</h2>
	<ul id="gh-comments-list"></ul>
	<p id="leave-a-comment">
		Join the discussion for this article
		<a href="https://github.com/HevaWu/HevaWu.github.io/issues/95">at here</a>
		. Our comments is using Github Issues. All of posted comments will display at this page instantly.
	</p>
</div>

<!-- Add Github issue comments. -->
  <div class="post-comment">
    {% if page.comment_id %}
      {% include comments.html %}
    {% endif %}
  </div>