<div class="feedback-item mr-3">
	<span class="like-icon"></span>
	<span class="like-count"></span>
</div>

<script type="text/javascript">
	frappe.ready(() => {
		let like = parseInt("{{ user_feedback.like or 0 }}");
		let like_count = parseInt("{{ like_count or 0 }}");

		let update_like = function() {
			like = !like;
			like ? like_count++ : like_count--;
			toggle_like_icon(like);
			$('.like-count').text(like_count);
		}

		let toggle_like_icon = function(active) {
			active ? $('.like-icon').addClass('gray') : $('.like-icon').removeClass('gray');
		}

		$('.like-icon').append(frappe.utils.icon('heart', 'md'))
		toggle_like_icon(like);

		$('.like-count').text(like_count);

		$('.like-icon').click(() => {
			update_like();
			update_feedback();
		})

		let update_feedback = function() {
			return frappe.call({
				method: "frappe.templates.includes.feedback.feedback.give_feedback",
				args: {
					reference_doctype: "{{ reference_doctype or doctype }}",
					reference_name: "{{ reference_name or name }}",
					like
				}
			});
		} 
	});
</script>