| {% block body %}

#node-container
	#node-overlay

	section.node-preview.video
		| {% if node.video_sources %}
		video#videoplayer.video-js.vjs-fluid(
			controls,
			data-setup="{}",
			preload="auto",
			poster="{% if node.picture %}{{ node.picture.thumbnail('l', api=api) }}{% endif %}")
			| {% for source in node.video_sources %}
			source(
				src="{{ source.src }}",
				type="{{ source.type }}")
			| {% endfor %}
			p.vjs-no-js.
				To view this video please enable JavaScript, and consider upgrading to a web browser that
				<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
		| {% else %}
		.video-dummy.sorry(
			style="{% if node.picture %}background-image: url({{ node.picture.thumbnail('l', api=api) }});{% endif %}")
			.video-dummy-content
				i.pi-lock.video-dummy-content-icon
				.video-dummy-content-text
					span Only available to Blender Cloud subscribers.
					a(href="{{ url_for('main.join') }}") Support Blender and get awesome stuff. <em>Subscribe now!</em>
		| {% endif %}


	section.node-details-container.video

		.node-details-header
			.node-title#node-title
				| {{node.name}}

		.node-details-meta.header
			ul.node-details-meta-list
				| {% if node.permissions.world %}
				li.node-details-meta-list-item.access.public(
					data-toggle="tooltip",
					data-placement="bottom",
					title="Anybody can download. Share it!")
					i.pi-lock-open
					span Public
				| {% endif %}

				| {% if node.properties.license_type %}
				| {% if node.properties.license_notes %}
				li.node-details-meta-list-item.video.license(
					id="asset-license",
					data-toggle="popover",
					data-placement="left",
					data-trigger="hover",
					data-content="{{ node.properties.license_notes }}",
					title="{{ node.properties.license_type }}")

					i(class="pi-license-{{ node.properties.license_type }}")
				| {% else %}
				li.node-details-meta-list-item.video.license(
					id="asset-license",
					data-toggle="tooltip",
					data-placement="bottom",
					title="{{ node.properties.license_type }}")

					i(class="pi-license-{{ node.properties.license_type }}")
				| {% endif %}
				| {% endif %}

				| {% if node.file %}
				| {% if node.file_variations %}
				li.btn-group.node-details-meta-list-item.video.download(
					title="Download Video")
					button.btn.btn-default.dropdown-toggle(
						type="button",
						data-toggle="dropdown",
						aria-haspopup="true",
						aria-expanded="false")
						i.pi-download
						i.pi-angle-down.icon-dropdown-menu

					ul.dropdown-menu
						| {% for child in node.file_variations %}
						li
							a(href="{{ child.link }}",
								title="Download this video format",
								download)
								span.length {{ child.length | filesizeformat }}

								span.format {{ child.format }}
								span.size {{ child.size }}

						| {% endfor %}
				| {% else %}
				li.btn-group.node-details-meta-list-item.video.download.disabled(
					title="Download Video")
					button.btn.btn-default.sorry(type="button")
						i.pi-lock
						i.pi-download
				| {% endif %}
				| {% endif %}

		| {% if node.description %}
		.node-details-description#node-description
			| {{node.description}}
		| {% endif %}

		| {% if node.properties.license_notes %}
		.node-details-meta.license
			| {{ node.properties.license_notes }}
		| {% endif %}

		.node-details-meta.footer
			ul.node-details-meta-list
				li.node-details-meta-list-item.status
						| {{ node.properties.status | undertitle }}

				li.node-details-meta-list-item.author
					| {{ node.user.full_name }}

				li.node-details-meta-list-item.date(title="Created {{ node._created }}")
					| {{ node._created | pretty_date }}
					| {% if (node._created | pretty_date) != (node._updated | pretty_date) %}
					span(title="Updated {{ node._updated }}") (updated {{ node._updated | pretty_date }})
					| {% endif %}


		#comments-embed
			#comments-list-items-loading
				i.pi-spin

script(type="text/javascript").
	{% if node.video_sources %}
	videojs(document.getElementById('videoplayer'), {
			fluid: true,
			controlBar: {
				volumeMenuButton: {
					inline: false,
					vertical: true
				}
			},
			loop: true,
		},
		function(){
			this.ga({
				'eventLabel' : '{{ node._id }} - {{ node.name }}',
				'eventCategory' : '{{ node.project }}',
				'eventsToTrack' : ['start', 'error', 'percentsPlayed']
			});
		}
	);
	{% endif %}

	$(function(){
		// Generate GA pageview
		ga('send', 'pageview', location.pathname);

		var content_type = $("li.node-details-meta-list-item.type").text();
		$("li.node-details-meta-list-item.type").text(content_type.substring(content_type.indexOf("/") + 1));

		{% if not node.video_sources %}
		$('.sorry').click(function() {
			$.get('/403', function(data) {
				$('#node-overlay').html(data).addClass('active');
			})
		});
		{% endif %}
	});

include ../../_scripts

| {% endblock %}