| {% import 'nodes/custom/comment/_macros.html' as macros %}
#comments-container
	a(name="comments")

	section#comments-list
		.comment-reply-container
			| {% if can_post_comments %}
			.comment-reply-avatar
				img(
					title="Commenting as {{ current_user.full_name }}",
					src="{{ current_user.gravatar }}")

			.comment-reply-form

				.comment-reply-field
					textarea(
						id="comment_field",
						data-parent-id="{{ node_id }}",
						placeholder="Join the conversation...")

					.comment-reply-meta
						.comment-details
							.comment-rules
								a(
									title="Markdown Supported",
									target="_blank",
									href="https://guides.github.com/features/mastering-markdown/")
									i.pi-markdown

						button.comment-action-cancel.btn.btn-outline(
							type="button",
							title="Cancel")
							i.pi-cancel
						button.comment-action-submit.btn.btn-outline(
							id="comment_submit",
							type="button",
							title="Post Comment (Ctrl+Enter)")
							| Post Comment

					.comment-reply-preview

			| {% elif current_user.is_authenticated %}

			| {# * User is authenticated, but has no subscription or 'POST' permission #}
			.comment-reply-form
				.comment-reply-field.sign-in
					| {% if current_user.has_role('subscriber') or current_user.has_role('demo') %}
					i.pi-lock
					|  Only project members can comment.
					| {% else %}
					| Join the conversation!&nbsp;<a href="https://store.blender.org/product/membership/">Subscribe to Blender Cloud</a> now.
					| {% endif %}

			| {% else %}
			| {# * User is not autenticated #}
			.comment-reply-form
				.comment-reply-field.sign-in
					textarea(
						disabled,
						id="comment_field",
						data-parent-id="{{ node_id }}",
						placeholder="")
					.sign-in
						a(href="{{ url_for('users.login') }}") Log in
						| to comment.

			| {% endif %}

		| {% if show_comments %}
		section#comments-list-header
			#comments-list-title
				| {% if nr_of_comments == 0 %}No{% else %}{{ nr_of_comments }}{% endif %} comment{{ nr_of_comments|pluralize }}
			#comments-list-items
				| {% for comment in comments['_items'] %}
				| {{ macros.render_comment(comment, False) }}
				| {% endfor %}
		| {% endif %}

| {% block comment_scripts %}
script.

	// Markdown initialization
	var convert = new Markdown.getSanitizingConverter();
	Markdown.Extra.init(convert);
	convert = convert.makeHtml;

	/* Submit new comment */
	$('.comment-action-submit').click(function(e){
		var $button = $(this);

		save_comment(true)
		.progress(function() {
			$button
				.addClass('submitting')
				.html('<i class="pi-spin spin"></i> Posting...');
		})
		.fail(function(xhr){
			if (typeof xhr === 'string') {
				show_comment_button_error(xhr);
			} else {
				// If it's not a string, we assume it's a jQuery XHR object.
				if (console) console.log('Error saving comment:', xhr.responseText);
				show_comment_button_error("Houston! Try again?");
			}
			toastr.error(xhr.responseText, 'Error saving comment');
		})
		.done(function(comment_node_id) {
			$button
				.removeClass('submitting')
				.html('Post Comment');
			$('#comment_field').val('');
			$('body').trigger('pillar:comment-posted', [comment_node_id]);
		});
	});

	{% if show_comments %}
	$('body').on('pillar:comment-posted', function(e, comment_node_id) {
		var commentsUrl = "{{ url_for('nodes.comments_for_node', node_id=node_id) }}";
		loadComments(commentsUrl)
		.done(function() {
			$('#' + comment_node_id).scrollHere();
		});
	});
	{% endif %}

	/* Edit comment */

	// Markdown convert as we type in the textarea
	$(document).on('keyup','body .comment-reply-field textarea',function(e){
		var $textarea = $(this);
		var $container = $(this).parent();
		var $preview = $textarea.next().next();

		// TODO: communicate with back-end to do the conversion,
		// rather than relying on our JS-converted Markdown.
		$preview.html(convert($textarea.val()));

		// While we are at it, style if empty
		if ($textarea.val()) {
			$container.addClass('filled');
		} else {
			$container.removeClass('filled');
		}

		// Send on ctrl+enter
		if ($textarea.is(":focus")) {
			if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey){
				$( ".comment-action-submit" ).trigger( "click" );
			}
		}
	});


	/* Enter edit mode */
	$(document).on('click','body .comment-action-edit span.edit_mode',function(){
		comment_mode(this, 'edit');

		var parent_div = $(this).closest('.comment-container');
		var comment_id = parent_div.data('node-id');

		var comment_content = parent_div.find('.comment-content');
		var height = comment_content.height();

		loadComment(comment_id, {'properties.content': 1})
		.done(function(data) {
			var comment_raw = data['properties']['content'];
			comment_content.html($('<textarea>').text(comment_raw));
			comment_content
				.addClass('editing')
				.find('textarea')
				.height(Math.max(150, height + 30))
				.focus()
				.trigger('keyup');
			comment_content.siblings('.comment-content-preview').show();
		})
		.fail(function(xhr) {
			if (console) console.log('Error fetching comment: ', xhr);
			statusBarSet('error', 'Error ' + xhr.status + ' entering edit mode.', 'pi-warning');
		});
	});

	$(document).on('click','body .comment-action-edit span.edit_cancel',function(e){
		commentEditCancel(this, true);
	});

	/* Save edited comment */
	$(document).on('click','body .comment-action-edit span.edit_save',function(e){
		var $button = $(this);
		var $container = $button.closest('.comment-container');

		save_comment(false, $container)
		.progress(function() {
			$button
				.addClass('submitting')
				.html('<i class="pi-spin spin"></i> Posting...');
		})
		.fail(function(xhr) {
			if (typeof xhr === 'string') {
				show_comment_edit_button_error($button, xhr);
			} else {
				// If it's not a string, we assume it's a jQuery XHR object.
				if (console) console.log('Error saving comment:', xhr.responseText);
				show_comment_edit_button_error($button, "Houston! Try again?");
			}
		})
		.done(function(comment_id, comment_html) {
			commentEditCancel($button, false)

			$container.find('.comment-content')
				.html(comment_html)
				.flashOnce();

			$button
				.html('<i class="pi-check"></i> save changes')
				.removeClass('saving');
		});
	});

| {% endblock %}