{% if not comment_list %}
<div class="no-comment">
	<div class="alert alert-info">Start a new discussion.</div>
</div>
{% endif %}

<div itemscope itemtype="http://schema.org/UserComments" id="comment-list">
	{% for comment in comment_list %}
	{% include "templates/includes/comment.html" %}
	{% endfor %}
</div>

<div><button class="btn btn-default add-comment">Add Comment</button></div>
<div style="display: none; margin-top: 10px; max-width: 400px;" 
	id="comment-form">
	<div class="alert" style="display:none;"></div>
	<form>
		<fieldset>
			<input class="form-control" name="comment_by_fullname" placeholder="Your Name" type="text"/><br>
			<input class="form-control" name="comment_by" 
				placeholder="Your Email Id" type="text"/><br>
			<textarea class="form-control" name="comment" rows=10
				placeholder="Comment"/>
			</textarea><br>
			<button class="btn btn-info" id="submit-comment">Submit</button>
		</fieldset>
	</form>
</div>


<script>
$(document).ready(function() {
	var n_comments = $(".comment-row").length;
	
	if(n_comments) {
		$(".no_comment").toggle(false);
	}
	if(n_comments > 50) {
		$(".add-comment").toggle(false)
			.parent().append("<div class='alert alert-warning'>Comments are closed.</div>")
	}
	$(".add-comment").click(function() {
		$(this).toggle(false);
		$("#comment-form").toggle();

		$("[name='comment_by']").val(getCookie("user_id") || "");
		$("[name='comment_by_fullname']").val(getCookie("full_name") || "");
		$("#comment-form textarea").val("");
	})
	$("#submit-comment").click(function() {
		var args = {
			comment_by_fullname: $("[name='comment_by_fullname']").val(),
			comment_by: $("[name='comment_by']").val(),
			comment: $("[name='comment']").val(),
			comment_doctype: "{{ doctype }}",
			comment_docname: "{{ name }}",
			page_name: "{{ page_name }}",
		}
				
		if(!args.comment_by_fullname || !args.comment_by || !args.comment) {
			wn.msgprint("All fields are necessary to submit the comment.")
			return false;
		}
		
		wn.call({
			btn: this,
			type: "POST",
			method: "webnotes.templates.includes.comments.add_comment",
			args: args,
			callback: function(r) {
				if(r.exc) {
					if(r._server_messages)
						wn.msgprint(r._server_messages);
				} else {
					$(r.message).appendTo("#comment-list");
					$(".no-comment, .add-comment").toggle(false);
					$("#comment-form")
						.replaceWith("<div class='alert alert-success'>Thank you for your comment!</div>")
				}
			}
		})

		return false;
	})
})
</script>