| {% extends 'layout.html' %}
| {% from '_macros/_navigation.html' import navigation_project %}
| {% from '_macros/_opengraph.html' import opengraph %}

include ../../../../pillar/src/templates/mixins/components

| {% block bodyclasses %}{{ super() }} landing-home{% endblock %}

| {% from '_macros/_asset_list_item.html' import asset_list_item %}

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

| {% if og_picture %}
| {% set og_picture_url = og_picture.thumbnail('l', api=api) %}
| {% else %}
| {% set og_picture_url = None %}
| {% endif %}

| {% block og %}
| {{ opengraph(project.name, project.summary, og_picture_url, url_for('cloud.project_landing', project_url=project.url, _external=True)) }}
| {% endblock %}


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

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

| {% block navigation_tabs %}
| {{ navigation_project(project, navigation_links, extension_sidebar_links, title) }}
| {% endblock navigation_tabs %}

| {% block body %}

| {% if project.has_method('PUT') %}
+nav-secondary
	+nav-secondary-link(
		href="{{ url_for('projects.edit', project_url=project.url) }}",
		class="text-white")
		i.pi-edit.pr-2
		span Edit Project
| {% endif %}

| {% if project.picture_header %}
| {% set project_header = project.picture_header.thumbnail('h', api=api) %}
| {% endif %}

| {% set project_browse_url = url_for('cloud.project_browse', project_url=project.url) %}

.jumbotron.text-white.jumbotron-overlay-gradient-fade-to-gray(
	style="background-image: url(\'{{ project_header }}\');")
	.container
		.row
			.col-md-6
				.display-4.text-uppercase.font-weight-bold
					| {% if project.extension_props.cloud.logo %}
					a(href="{{ project_browse_url }}")
						img.img-fluid(
							alt="{{ project.name }}",
							src="{{ project.extension_props.cloud.logo.thumbnail('m', api=api) }}")
					| {% else %}
					a.text-white(href="{{ project_browse_url }}")
						| {{ project.name }}
					| {% endif %}

				.lead.pt-3
					| {% if project.summary %}
					| {{ project | markdowned('summary') }}
					| {% endif %}

				.d-flex.pt-4
					| {% if project.extension_props.cloud.video_url %}
					a.btn.btn-primary.px-5(
						class="js-open-overlay-video",
						href="{{ project.extension_props.cloud.video_url }}",
						target="_blank")
						i.pi-play.pr-2
						| WATCH
					| {% endif %}

					a.btn.btn-link.px-4.text-white(href="{{ project_browse_url }}")
						| Browse
						i.pi-angle-right.pl-2


.container-fluid.landing
	.row
		.col-md-8.mx-auto.mt-5
			.node-details-description
				| {% if project.description %}
				| {{ project | markdowned('description') }}
				| {% endif %}

	.row
		.col-md-10.mx-auto
			section.py-5
				.gallery.mx-auto
					| {% for n in activity_stream %}
					| {% if n.node_type not in ['comment', 'post'] and n.picture %}
					.thumbnail.expand-image-links
						.img-container
							a.js-open-overlay-image(
								title="{{ n.name }}",
								href="{{ n.picture.thumbnail('l', api=api) }}")
								img(
									alt="{{ n.name }}",
									src="{{ n.picture.thumbnail('l', api=api) }}")
					| {% endif %}
					| {% endfor %}

			.clearfix
				.text-center.mx-auto.py-3
					a.btn.btn-outline-primary.px-5(
						href="{{ project_browse_url }}")
						| See More Artwork


	.row.mt-5
		.col-md-10.mx-auto
			h2.pb-3 Project Timeline
			.timeline-dark
				+timeline("{{ project._id }}")

| {% endblock body %}


| {% block footer_scripts %}
script.
	function showOverlay(html_content) {
		$('#page-overlay')
			.addClass('active')
			.html(html_content);
	}

	function hideOverlay() {
		$('#page-overlay')
			.removeClass('active')
			.html('');
	}

	$("a.js-open-overlay-image").on( "click", function(e) {
		e.preventDefault();
		e.stopPropagation();

		var url = $(this).attr('href');
		showOverlay('<img src="' + url + '"/>');
	});

	{% if project.extension_props.cloud.video_url %}
	//- By isherwood - http://jsfiddle.net/isherwood/cH6e8/
	function getYoutubeId(url) {
		var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
		var match = url.match(regExp);

		if (match && match[2].length == 11) {
				return match[2];
		} else {
				return 'error';
		}
	}

	var videoId = getYoutubeId('{{ project.extension_props.cloud.video_url }}');
	var iframeMarkup = '<iframe width="960" height="540" src="//www.youtube.com/embed/'
			+ videoId + '" frameborder="0" allowfullscreen></iframe>';

	$("a.js-open-overlay-video").on( "click", function(e) {
		e.preventDefault();
		e.stopPropagation();

		showOverlay(iframeMarkup);
	});
	{% endif %}

	//- Click anywhere on the page or hit Escape to hide the overlay.
	$(document).click(function () {
		hideOverlay();
	});

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