{% 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>

{% if login_required and frappe.user=="Guest" %}
	<div class="alert alert-warning">You must <a href="/login?redirect-to={{ pathname }}">login</a> to comment.</div>
{% else %}
	<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" {% if login_required %}disabled{% endif %}><br>
				<input class="form-control" name="comment_by"
					placeholder="Your Email Id" type="email" {% if login_required %}disabled{% endif %}><br>
				<textarea class="form-control" name="comment" rows=10
					placeholder="Comment"/>
				</textarea><br>
				<button class="btn btn-primary" id="submit-comment">Submit</button>
			</fieldset>
		</form>
	</div>
{% endif %}

<script>
frappe.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='text-muted'>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 }}",
			comment_type: "Comment",
			page_name: "{{ pathname }}",
		}

		if(!args.comment_by_fullname || !args.comment_by || !args.comment) {
			frappe.msgprint("All fields are necessary to submit the comment.")
			return false;
		}

		if (!valid_email(args.comment_by)) {
			frappe.msgprint("Please enter a valid email address.");
			return false;
		}

		frappe.call({
			btn: this,
			type: "POST",
			method: "frappe.templates.includes.comments.add_comment",
			args: args,
			callback: function(r) {
				if(r.exc) {
					if(r._server_messages)
						frappe.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>