#theatre-media.d-flex.justify-content-center.align-items-center.bg-dark
	img(src="{{ node.picture.thumbnail('h', api=api) }}", onmousedown="return false")

	ul#theatre-tools
		li.theatre-tool-resize(title="Toggle Normal Size")
			span
				i.pi-resize-full
		| {% if node.file and node.file.link %}
		li.download
			a(href="{{ node.file.link }}",
				title="Download the original file",
				download="{{ node.file.filename }}")
				i.pi-download
		| {% else %}
		li.download.disabled
			a(href="{{ url_for('users.login') }}",
				title="Sign in to download the original file")
				i.pi-download
		| {% endif %}

#theatre-info.bg-white.h-100
	h5.p-3 {{ node.name }}
	small.d-flex.text-secondary.pl-3
		span.font-weight-bold {{ node.user.full_name }}
		span.px-3 {{ node._created | pretty_date_time }}

	ul.theatre-info-details.border-bottom.mb-3.p-3.list-unstyled
		li
			span Type
			span {{ node.file.content_type }}
		| {% if node.file.width %}
		li
			span Dimensions
			span {{ node.file.width }} <small>x</small> {{ node.file.height }}
		| {% endif %}
		li
			span Size
			span {{ node.file.length | filesizeformat }}
		| {% if node.short_link %}
		li
			span Share link
			a(href="{{ node.short_link }}") {{ node.short_link }}
		| {% endif %}

	.mx-3
		comments-tree#comments-embed(
			parent-id="{{ node._id }}"
		)

include ../_scripts

script.
	$(function () {

		var file_width = '{{ node.file.width }}';
		var file_height = '{{ node.file.height }}';
		var theatre_media = document.getElementById('theatre-media');
		var $theatre_media = $(theatre_media);

		function canZoom() {
			// If there is no width/height defined, let's just let it zoom.
			// It might just be a non-image asset, like a file.
			return file_width == 'None' ||
					theatre_media.scrollWidth < file_width ||
					theatre_media.scrollHeight < file_height;
		}

		// TODO: update this whenever the screen resizes.
		if (canZoom()) $theatre_media.addClass('zoomed-out');

		function theatreZoom() {
			var started_zoomed_in = $theatre_media.hasClass('zoomed-in');

			// See if we need to zoom in at all. Zooming out is always allowed.
			if (!started_zoomed_in && !canZoom()) {
				$theatre_media.removeClass('zoomed-out');
				return;
			}

			// Use add/removeClass to ensure there is always exactly one of zoomed-{in,out}.
			// If we were to use toggleClass() they could both be applied when we started
			// without zoomed-out class.
			if (started_zoomed_in) {
				$theatre_media.removeClass('zoomed-in');
				$theatre_media.addClass('zoomed-out');
			} else {
				$theatre_media.addClass('zoomed-in');
				$theatre_media.removeClass('zoomed-out');
			}

			// Style toolbar button
			$('ul#theatre-tools li.theatre-tool-resize').toggleClass('active');
		}

		$('ul#theatre-tools li.theatre-tool-resize').on('click', function (e) {
			theatreZoom();
		});

		$('.js-toggle-info').on('click', function (e) {
			e.preventDefault();
			$('#theatre-container').toggleClass('with-info');
		});

		$("#theatre-media img").on('click', function (e) {
			var $parent = $(this).parent();
			var mouse_x = e.pageX;
			var mouse_y = e.pageY;

			// Compute relative position before zooming in.
			var pre_width = e.target.clientWidth;
			var rel_x = e.offsetX / pre_width;
			var rel_y = e.offsetY / e.target.clientHeight;

			theatreZoom();

			var post_width = e.target.clientWidth;

			if (post_width > pre_width) {
				// We zoomed in, scroll such that the target position is under the mouse.
				var target_x = Math.round(rel_x * post_width);
				var target_y = Math.round(rel_y * e.target.clientHeight);

				$parent
					.scrollLeft(target_x - mouse_x + e.target.parentElement.parentElement.offsetLeft)
					.scrollTop(target_y - mouse_y + e.target.parentElement.parentElement.offsetTop);
			}
		});
	});