| {% import 'projects/_macros.html' as projectmacros %}
| {% 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('h', api=api) }}")
//- Jumbotron
.jumbotron.jumbotron-fluid(style="background-image: url('../../../static/assets/img/backgrounds/banner-hero.jpg')")
	.container
		h1.display-4.node_index-collection-name {{ page_title }}
		p.lead.node_index-collection-description {{ page_header_text }}

//- Secondary Navigation
//- | {% block navbar_secondary %}
//- | {{ projectmacros.render_secondary_navigation(project, pages=pages) }}

//- | {% endblock navbar_secondary %}
.container.navbar-secondary
	ul.nav.justify-content-left
		li.nav-item
			a.nav-link.nav-title(href="#") Hero
		li.nav-item
			a.nav-link(href="#", class="{% if title == 'updates' %}active{% endif %}") Updates
		li.nav-item
			a.nav-link(href="#", class="{% if title == 'team' %}active{% endif %}") Team
		li.nav-item
			a.nav-link(href="#", class="{% if title == 'gallery' %}active{% endif %}") Gallery
		li.nav-item
			a.nav-link(href="#", class="{% if title == 'assets' %}active{% endif %}") Assets
		li.nav-item
			a.nav-link(href="#", class="{% if title == 'dashboard' %}active{% endif %}") Dashboard
#container.landing
	section.node-details-container.project
		.node-details-title.container
			//- h1 {{ project.name }}
			h1 Hero
			p Hero is a showcase for the upcoming Grease Pencil in Blender 2.8. Grease Pencil means 2D animation tools within a full 3D pipeline. In Blender. In Open Source. Free for everyone!
			p Hero is directed by Daniel M Lara, and it is the 6th short film funded by the Blender Cloud.
			.iframe-container
				iframe(allowfullscreen="", frameborder="0", height="", src="https://www.youtube.com/embed/pKmSdY56VtY", width="")
			p Following the classic Blender Cloud publishing model, blend files, walkthroughs and breakdowns will be released in the upcoming weeks. You can already enjoy a couple of shots #[a(href="https://cloud.blender.org/p/hero/5ad4cbd8f87ec500fea61c22") in the gallery link].
			p #[strong Join Blender Cloud!] Projects like Hero are made possible by Blender Cloud subscribers. Consider #[a(href="https://store.blender.org/product/membership/") supporting us] so we can create more Open Content and improve the best 3D (and 2D) animation software in the world!
		//- | {% if project.description %}
		//- .node-details-description
		//- 	| {{ project | markdowned('description') }}
		//- | {% endif %}


	section.gallery
		h2.text-center Gallery
		//- | {% for n in activity_stream %}
		//- | {% if n.node_type not in ['comment', 'post'] and n.picture %}
		//- .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")
		//- | {% if project.nodes_featured %}
		//- | {# In some cases featured_nodes might might be embedded #}
		//- | {% if '_id' in project.nodes_featured[0] %}
		//- | {% set featured_node_id=project.nodes_featured[0]._id %}
		//- | {% else %}
		//- | {% set featured_node_id=project.nodes_featured[0] %}
		//- | {% endif %}
		//- a.btn(href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}") See more
		//- | {% endif %}
		.container
			.row
				.col-4.col-sm-3
					a(href="#")
						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-8.jpg")
						img(src="http://placehold.it/260x260")
				.col-4.col-sm-3
					a(href="#")
						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-7.jpg")
						img(src="http://placehold.it/260x260")
				.col-4.col-sm-3
					a(href="#")
						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-6.png")
						img(src="http://placehold.it/260x260")
				.col-4.col-sm-3
					a(href="#")
						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-5.png")
						img(src="http://placehold.it/260x260")
				.col-4.col-sm-3
					a(href="#")
						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-4.png")
						img(src="http://placehold.it/260x260")
				.col-4.col-sm-3
					a(href="#")
						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-3.png")
						img(src="http://placehold.it/260x260")
				.col-4.col-sm-3
					a(href="#")
						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-2.jpg")
						img(src="http://placehold.it/260x260")
				.col-4.col-sm-3
					a(href="#")
						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg")
						img(src="http://placehold.it/260x260")
		a(href="#")
			| See Hero Gallery
						


	section.node-extra
		h2.text-center Latest Updates
		.container.card-container
			.row
				.col-md-4
					.card
						a(href="#")
							img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
						.card-body
							h4.card-title
								a(href="#") Title
							p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
				.col-md-4
					.card
						a(href="#")
							img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
						.card-body
							h4.card-title
								a(href="#") Title
							p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
				.col-md-4
					.card
						a(href="#")
							img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
						.card-body
							h4.card-title
								a(href="#") Title
							p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
				.col-md-4
					.card
						a(href="#")
							img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
						.card-body
							h4.card-title
								a(href="#") Title
							p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
				.col-md-4
					.card
						a(href="#")
							img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
						.card-body
							h4.card-title
								a(href="#") Title
							p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!

		//- | {% 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

| {% 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[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 %}
