<div class="comment-view mb-6">
	{% if comment_text %}
	<div class="comment-header mb-6">{{ comment_text }}</div>
	{% endif %}
	{% if not comment_list %}
	<div class="no-comment">
		<p class="text-muted small">{{ _("No comments yet. Start a new discussion.") }}</p>
	</div>
	{% endif %}

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

{% if not is_communication %}
<div class="add-comment-section">
	<div class="text-muted hidden login-required">
		<a href="/login?redirect-to={{ pathname }}">{{ _("Login to comment") }}</a>
	</div>

	<div class="comment-form-wrapper">
		<a class="add-comment btn btn-light btn-sm">{{ _("Add Comment") }}</a>
		<div style="display: none;" id="comment-form">
			<p>{{ _("Leave a Comment") }}</p>
			<div class="alert" style="display:none;"></div>
			<form>
				<fieldset>
					<div class="row" style="margin-bottom: 15px;">
						<div class="col-sm-6">
							<input class="form-control comment_by" name="comment_by" placeholder="{{ _("Your Name") }}" type="text">
						</div>
						<div class="col-sm-6">
							<input class="form-control comment_email" name="comment_email" placeholder="{{ _("Your Email Address") }}" type="email">
						</div>
					</div>
					<p><textarea class="form-control" name="comment" rows=10
				       placeholder="{{ _("Comment") }}"></textarea></p>
					<button class="btn btn-primary btn-sm" id="submit-comment" style="margin-top:10px">{{ _("Submit") }}</button>
				</fieldset>
			</form>
		</div>
	</div>
</div>
{% endif %}
<script>
	frappe.ready(function() {
		if (!frappe.is_user_logged_in()) {
			$(".login-required, .comment-form-wrapper").toggleClass("hidden");
		} else {
			$('input.comment_by').prop("disabled", true);
			$('input.comment_email').prop("disabled", true);
		}

		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();
			var full_name = "", user_id = "";
			if(frappe.is_user_logged_in()) {
				full_name = frappe.get_cookie("full_name");
				user_id = frappe.get_cookie("user_id");
				if(user_id != "Guest") {
					$("[name='comment_email']").val(user_id);
					$("[name='comment_by']").val(full_name);
				}
			}
			$("#comment-form textarea").val("");
		})

		$("#submit-comment").click(function() {
			var args = {
				comment_by: $("[name='comment_by']").val(),
				comment_email: $("[name='comment_email']").val(),
				comment: $("[name='comment']").val(),
				reference_doctype: "{{ reference_doctype or doctype }}",
				reference_name: "{{ reference_name or name }}",
				comment_type: "Comment",
				route: "{{ pathname }}",
			}

			if(!args.comment || !args.comment.trim()) {
				frappe.msgprint("{{ _("Please add a valid comment.") }}");
				return false;
			}

			frappe.call({
				btn: this,
				type: "POST",
				method: "frappe.templates.includes.comments.comments.add_comment",
				args: args,
				callback: function(r) {
					if(r.exc) {
						if(r._server_messages)
							frappe.msgprint(r._server_messages);
					} else {
						if (r.message) {
							$(r.message).appendTo("#comment-list");
							$(".add-comment").text(__("Add Another Comment"));
						}
						$(".no-comment, .add-comment").toggle(false);
						$("#comment-form").toggle();
						$(".add-comment").toggle();
					}
				}
			})

			return false;
		})
	});
</script>
