| {% extends 'layout.html' %}

| {% block page_title %}{{ project.name }}{% endblock%}

| {% block og %}
meta(property="og:type", content="website")

| {% if og_picture %}
meta(property="og:image", content="{{ og_picture.thumbnail('l', api=api) }}")
meta(name="twitter:image", content="{{ og_picture.thumbnail('l', api=api) }}")
| {% elif node and node.picture %}
meta(property="og:image", content="{{ node.picture.thumbnail('l', api=api) }}")
meta(name="twitter:image", content="{{ node.picture.thumbnail('l', api=api) }}")
| {% elif project.picture_header %}
meta(property="og:image", content="{{ project.picture_header.thumbnail('l', api=api) }}")
meta(name="twitter:image", content="{{ project.picture_header.thumbnail('l', api=api) }}")
| {% endif %}

| {% if show_project %}
meta(property="og:title", content="{{ project.name }} - Blender Cloud")
meta(name="twitter:title", content="{{ project.name }} - Blender Cloud")
meta(property="og:description", content="{{ project.summary }}")
meta(name="twitter:description", content="{{ project.summary }}")
meta(property="og:url", content="{{ url_for('projects.view', project_url=project.url, _external=True) }}")
| {% else %}

| {% if node %}
meta(property="og:title", content="{{ node.name }} - Blender Cloud")
meta(name="twitter:title", content="{{ node.name }} on Blender Cloud")

| {% if node.node_type == 'post' %}

| {% if node.properties.content %}
meta(property="og:description", content="{{ node.properties.content | truncate(180) }}")
meta(name="twitter:description", content="{{ node.properties.content | truncate(180) }}")
| {% else %}
meta(property="og:description", content="Blender Cloud, your source for open content and training")
meta(name="twitter:description", content="Blender Cloud, your source for open content and training")
| {% endif %}

| {% else %}

| {% if node.description %}
meta(property="og:description", content="{{ node.description | truncate(180) }}")
meta(name="twitter:description", content="{{ node.description | truncate(180) }}")
| {% else %}
meta(property="og:description", content="Blender Cloud, your source for open content and training")
meta(name="twitter:description", content="Blender Cloud, your source for open content and training")
| {% endif %}

| {% endif %}

meta(property="og:url", content="{{url_for('projects.view_node', project_url=project.url, node_id=node._id)}}")
| {% else %}
meta(property="og:title", content="{{ project.name }} Blog on Blender Cloud")
meta(name="twitter:title", content="{{ project.name }} Blog on Blender Cloud")
meta(property="og:description", content="{{ project.summary }}")
meta(name="twitter:description", content="{{ project.summary }}")

meta(property="og:url", content="{{url_for('projects.view', project_url=project.url, _external=True)}}")
| {% endif %}

| {% endif %}
| {% endblock og %}

| {% block page_overlay %}
#page-overlay.video
	.video-embed
#others
| {% endblock %}

| {% block head %}

script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-6.2.8.min.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}")
| {% endblock %}

| {% block css %}
link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet")
link(href="{{ url_for('static_pillar', filename='assets/css/base.css') }}", rel="stylesheet")
link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet")
| {% endblock %}

| {% block body %}
header
	//a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
	img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")

	a.page-card-cta.js-watch-video(
		href="https://www.youtube.com/watch?v=NwVGvcIrNWA",
		data-youtube-id="NwVGvcIrNWA")
		i.pi-play
		| Watch Film
| {% block navbar_secondary %}
nav.navbar-secondary
	.navbar-container
		nav.collapse.navbar-collapse
			ul.nav.navbar-nav.navbar-right
				li
					a.navbar-item(
						href="{{ url_for('projects.view', project_url=project.url) }}",
						title="{{ project.name }} Homepage")
						span
							b {{ project.name }}
				li
					a.navbar-item(
					href="{{ url_for('main.project_blog', project_url=project.url) }}",
					title="Project Blog",
					class="{% if category == 'blog' %}active{% endif %}")
						span Blog
				| {% for p in pages %}
				li
					a.navbar-item(
					href="{{ url_for('projects.view_node', project_url=project.url, node_id=p._id) }}",
					title="{{ p.name }}",
					class="{% if category == 'page' %}active{% endif %}")
						span {{ p.name }}
				| {% endfor %}
				li
					a.navbar-item(
					href="{{ url_for('projects.view_node', project_url=project.url, node_id='5ad24dd91effe4181aff5930') }}",
					title="Blender Cloud Blog",
					class="{% if category == 'blog' %}active{% endif %}")
						span Explore
| {% endblock navbar_secondary %}
#container
	section.node-details-container.project
		.node-details-title
			h1 {{ project.name }}

		| {% if project.description %}
		.node-details-description
			| {{ project | markdowned('description') }}
		| {% endif %}


	section.gallery
		h2 Gallery
		| {% for n in activity_stream %}
		| {% if n.node_type not in ['comment', 'post'] %}
		.thumbnail.expand-image-links
			.img-container
				a(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}")
					img(src="{{ n.picture.thumbnail('l', api=api) }}", alt="{{ n.name }}")
					.img-caption.table
						| {# Not using for the moment
						span.table-cell {{ n.name }}
						| #}
		| {% endif %}
		| {% endfor %}
		div(class="clearfix")
		a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See more

	section.node-extra
		h2 Latest Updates

		| {% if activity_stream %}
		.node-updates
			ul.node-updates-list
				| {% for n in activity_stream %}
				| {% if n.node_type == 'post' %}
				li.node-updates-list-item(
				data-node_id="{{ n._id }}",
				class="{{ n.node_type }} {{ n.properties.content_type | hide_none }}")
					a.image(href="{{ url_for_node(node=n) }}")
						| {% if n.picture %}
						img(src="{{ n.picture.thumbnail('l', api=api) }}")
						| {% endif %}

					.info
						a.title(href="{{ url_for_node(node=n) }}") {{ n.name }}
						p.description(href="{{ url_for_node(node=n) }}")
							| {% if n.node_type == 'post' %}
							| {{ n.properties | markdowned('content') | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
							| {% else %}
							| {{ n | markdowned('description') | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
							| {% endif %}
						//span.details
						//	span.what {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} ·
						//	span.when  {{ n._updated | pretty_date }} by
						//	span.who {{ n.user.full_name }}
				| {% endif %}
				| {% endfor %}
		| {% endif %}
		a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates
	section.social
		h2 Contact
		p.
			Blender Animation Studio
			ton@blender.org

			Entrepotdok 57A
			1018 AD Amsterdam
			the Netherlands
		ul.footer-social
			li
				a(href="https://www.facebook.com/BlenderCloudOfficial/",
				title="Follow us on Facebook")
					i.pi-social-facebook
			li
				a(href="https://twitter.com/Blender_Cloud",
				title="Follow us on Twitter")
					i.pi-social-twitter

| {% endblock body %}


| {% block footer_scripts %}
script.
	// Click anywhere in the page to hide the overlay
	function hideOverlay() {
		$('#page-overlay.video').removeClass('active');
		$('#page-overlay.video .video-embed').html('');
	}

	$(document).click(function () {
		hideOverlay();
	});

	$(document).keyup(function (e) {
		if (e.keyCode == 27) {
			hideOverlay();
		}
	});

	$('a.js-watch-video').click(function (e) {
		e.preventDefault();
		e.stopPropagation();

		$('#page-overlay.video').addClass('active');

		var videoId = $(this).attr('data-youtube-id');
		$('#page-overlay .video-embed').html('<iframe src="https://www.youtube.com/embed/' + videoId + '?rel=0&amp;showinfo=0;autoplay=1" frameborder="0" allowfullscreen></iframe>')
	});

	function loadNodeContent(url, nodeId) {

		$('#project-loading').addClass('active');
		$.get(url, function (dataHtml) {
			// Update the DOM injecting the generate HTML into the page
			$('#page-overlay').addClass('active');
			$('#others').html(dataHtml);
			// $('#project_context').html(dataHtml);
		})
			.done(function () {
				// updateUi(nodeId, 'view');
			})
			.fail(function (dataResponse) {
				$('#project_context').html($('<iframe id="server_error"/>'));
				$('#server_error').attr('src', url);
			})
			.always(function () {
				$('#project-loading').removeAttr('class');
				$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
			});
	}

	function displayNode(nodeId, pushState) {
		// Remove the 'n_' suffix from the id
		if (nodeId.substring(0, 2) == 'n_') {
			nodeId = nodeId.substr(2);
		}

		var url = '/nodes/' + nodeId + '/view';
		loadNodeContent(url, nodeId);

		// Determine whether we should push the new state or not.
		pushState = (typeof pushState !== 'undefined') ? pushState : true;
		if (!pushState) return;

		// Push the correct URL onto the history.
		var push_state = {nodeId: nodeId, url: url};
		var push_url = '{{url_for("projects.view", project_url=project.url)}}' + nodeId;
		// console.log('Pushing state ', push_state, ' with URL ', push_url);
		window.history.pushState(
			push_state,
			'Node ' + nodeId, // TODO: use sensible title
			push_url
		);
	}

	$("a[data-node_id]").on( "click", function(e) {
		// var nodeId = $(this).data('node_id');
		// displayNode(nodeId);
		e.preventDefault();
		e.stopPropagation();
		$('#page-overlay').addClass('active');
		var url = $(this).attr('href');
		$('#page-overlay').html('<img src="' + url + '"/>')
	});


| {% endblock %}