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

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

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

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

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

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

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

			return influxframework.call({
				method: "influxframework.templates.includes.likes.likes.like",
				args: {
					reference_doctype: "{{ reference_doctype or doctype }}",
					reference_name: "{{ reference_name or name }}",
					like,
					route: "{{ pathname }}",
				}
			});
		}
	});
</script>
