| {% block head %}
| {% if header_video_file %}
script(src="//releases.flowplayer.org/6.0.5/flowplayer.min.js")
script.
	$(function() {
		$('#flowplayer_container').flowplayer({
			key: "{{config.FLOWPLAYER_KEY}}",
			embed: false,
			splash: true,
			clip: { sources: [
			{% for var in header_video_file.variations %}
				{type: "{{ var.content_type }}", src: "{{ var.link|safe }}"},
			{% endfor %}
			]}
		});
	});
| {% endif %}
| {% endblock %}

| {% block body %}

#node-container
	section.node-preview.project
		| {% if header_video_file %}
		#flowplayer_container.is-splash.play-button(
			style="{% if header_video_node.picture %}background-image:url({{header_video_node.picture.thumbnail('l', api=api)}}); background-repeat:no-repeat; {% endif %}")
			.fp-startscreen.fp-toggle
				a.big-play-button
					i.pi-play
			.fp-endscreen
				a.watch-again.fp-toggle
					i.pi-replay
					| Watch again
			.fp-waiting
				i.pi-spin.spin
		| {% elif project.picture_header %}
		a(href="{{ url_for( 'projects.about', project_url=project.url) }}")
			img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")
		| {% endif %}

	section.node-details-container.project

		| {# Hide for now
		.node-details-header
			.node-title-details
				.date(title="Last updated {{ project._updated | pretty_date }}") {{ project._created | pretty_date }}

				| {% if project.status %}
				.status {{project.status}}
				| {% endif %}
		| #}

		.node-details-title
			h1
				a(href="{{ url_for( 'projects.about', project_url=project.url) }}") {{ project.name }}

		| {% if title != 'about' or not project.description %}
		| {% set description = project.summary %}
		| {% else %}
		| {% set description = project.description %}
		| {% endif %}

		.node-details-description
			| {{ description }}

		| {% if title != 'about' %}
		a.learn-more(href="{{ url_for( 'projects.about', project_url=project.url) }}") LEARN MORE

		.node-extra

			| {% if activity_stream %}
			.node-updates
				ul.node-updates-list
					| {% for n in activity_stream %}
					| {% if n.node_type not in ['comment'] %}
					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 %}

							| {% if n.node_type == 'post' %}
							i.pi-newspaper
							| {% elif n.node_type == 'texture' or n.node_type == 'group_texture' %}
							i.pi-texture
							| {% elif n.properties.content_type == 'video' %}
							i.pi-film-thick
							| {% elif n.properties.content_type == 'image' %}
							i.pi-picture
							| {% elif n.properties.content_type == 'file' %}
							i.pi-file-archive
							| {% else %}
							i.pi-folder
							| {% 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.content | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
								| {% else %}
								| {{ n.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 %}

		| {% endif %}

include _scripts

script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.montage.min.js') }}")
script.
	function montage(){
		var $container 	= $('#featured-list'),
			$imgs		= $container.find('img').hide(),
			totalImgs	= $imgs.length,
			cnt			= 0;

		$imgs.each(function(i) {
			var $img	= $(this);
			$('<img/>').on('load', function() {
				++cnt;
				if( cnt === totalImgs ) {
					$imgs.show();
					$container.montage({
						fillLastRow	: true,
							alternateHeight	: true,
							alternateHeightRange : {
								min	: 180,
								max	: 240
							},
							margin : 3
					});
				}
			}).attr('src',$img.attr('src'));
			$img.parent().removeClass('hidden');
		});
	}

	$(function() {
		montage();

		$(".node-updates-list-item.asset, .node-updates-list-item.group")
				.unbind('click')
				.click(function(e) {
			e.preventDefault();
			displayNode($(this).data('node_id'));
		});
	});


| {% endblock %}