| {% extends 'layout.html' %}
| {% block page_title %}Search{% if project %} {{ project.name }}{% endif %}{% 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 og %}
meta(property="og:type", content="website")
| {% if og_picture %}
meta(property="og:image", content="{{ og_picture.thumbnail('l', api=api) }}")
meta(property="twitter:image", content="{{ og_picture.thumbnail('l', api=api) }}")
| {% endif %}
| {% if project %}
meta(property="og:title", content="{{project.name}} - Blender Cloud")
meta(name="twitter:title", content="{{project.name}} on Blender Cloud")
meta(property="og:url", content="{{url_for('projects.view', project_url=project.url, _external=True)}}")
meta(property="og:description", content="{{project.summary}}")
meta(name="twitter:description", content="{{project.summary}}")
| {% endif %}
| {% endblock %}

| {% block body %}
| {% if project %}
script.
	document.body.dataset["projectId"] = "{{project._id}}";
| {% endif %}

#search-container

	| {% if project %}
	#project_sidebar.bg-white
		ul.project-tabs.p-0
			li.tabs-browse(
				title="Browse",
				data-toggle="tooltip",
				data-placement="right")
				a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
					i.pi-folder

			li.tabs-search.active(
				title="Search",
				data-toggle="tooltip",
				data-placement="right")
				a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}")
					i.pi-search
	| {% endif %}

	#search-sidebar
		input.search-field.p-2.bg-white(
				type="text",
				name="q",
				id="q",
				autocomplete="off",
				spellcheck="false",
				autocorrect="false",
				placeholder="Search by Title, Type...")

		.search-list-filters
			.filter-list
				| View as:
				ul.filter-list
					li.filter-list-type.grid(
						title="Browse as grid",
						data-list-type="grid")
						i.pi-layout
					li.filter-list-type.list(
						title="Browse as list",
						data-list-type="list")
						i.pi-list

			#accordion.panel-group.accordion(role="tablist", aria-multiselectable="true")
				#facets

		#pagination

		.search-list-stats
			#stats

	#search-list
		#hits

	#search-details
		#search-error
		#search-hit-container


| {% raw %}
// Facet template
script(type="text/template", id="facet-template")
	.panel.panel-default
		a(data-toggle='collapse', data-parent='#accordion', href='#filter_{{ facet }}', aria-expanded='true', aria-controls='filter_{{ facet }}')
			.panel-heading(role='tab')
				.panel-title {{ title }}
		.panel-collapse.collapse.in(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne')
			.panel-body
				| {{#values}}
				a.facet_link.toggleRefine(
					class='{{#refined}}refined{{/refined}}',
					data-facet='{{ facet }}',
					data-value='{{ value }}',
					href='#')
					span
						| {{ label }}
						small.facet_count.pull-right {{ count }}
				| {{/values}}


// Hit template
script(type="text/template", id="hit-template")
	.search-hit(data-hit-id='{{ objectID }}')
		.search-hit-thumbnail
			| {{#picture}}
			img(src="{{{ picture }}}")
			| {{/picture}}
			| {{^picture}}
			.search-hit-thumbnail-icon
				| {{#media}}
				i(class="pi-{{{ media }}}")
				| {{/media}}
				| {{^media}}
				i.dark(class="pi-{{{ node_type }}}")
				| {{/media}}
			| {{/picture}}
			| {{#is_free}}
			.search-hit-ribbon
				span free
			| {{/is_free}}
		.search-hit-name
			| {{ name }}
		.search-hit-meta
			span.project {{ project.name }}
			span.node_type {{{ node_type }}}
			| {{#media}}
			span.media · {{{ media }}}
			| {{/media}}
			span.when {{{ created_at }}}
			span.context
				a(href="/nodes/{{ objectID }}/redir") view in context


// Pagination template
script(type="text/template", id="pagination-template")
	ul.search-pagination.
		<li {{^prev_page}}class="disabled"{{/prev_page}}><a href="#" {{#prev_page}} class="gotoPage" data-page="{{ prev_page.page }}" {{/prev_page}}><i class="pi-angle-left"></i></a></li>
		{{#pages}}
		<li class="{{#current}}active{{/current}}{{#disabled}}disabled{{/disabled}}"><a href="#" {{^disabled}} class="gotoPage" data-page="{{ number }}" {{/disabled}}>{{ shownr }}</a></li>
		{{/pages}}
		<li {{^next_page}}class="disabled"{{/next_page}}><a href="#" {{#next_page}} class="gotoPage" data-page="{{ page }}" {{/next_page}}><i class="pi-angle-right"></i></a></li>

// Stats template
script(type="text/template", id="stats-template")
	span {{ nbHits }} result{{#nbHits_plural}}s{{/nbHits_plural}}
		small  ({{ processingTimeMS }}ms)
| {% endraw %}

| {% endblock %}

| {% block footer_scripts %}
script(src="//releases.flowplayer.org/6.0.5/flowplayer.min.js", async)
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/hogan.common-3.0.0.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/elasticsearch.min.js') }}")

script.
	function displayNode(userId) {
		var url = '/nodes/' + userId + '/view';

		$.get(url, function(dataHtml){
			$('#search-hit-container').html(dataHtml);
		})
		.done(function(){
			$('.loader-bar').removeClass('active');
			$('#search-error').hide();
			$('#search-hit-container').show();
		})
		.fail(function(data){
			$('.loader-bar').removeClass('active');
			$('#search-hit-container').hide();
			$('#search-error').show().html('Houston!\n\n' + data.status + ' ' + data.statusText);
		});
	}

	$('body').on('click', '.search-hit', function(){
		$('.loader-bar').removeClass('active').addClass('active');

		displayNode($(this).data('hit-id'));
		$('.search-hit').removeClass('active');
		$(this).addClass('active');
	});

	// Remove focus from search input so that the click event bound to .search-hit
	// can be fired on the first click.
	$(searchList).hover(function(){
		$('#q').blur();
	});
	$('#search-sidebar').hover(function(){
		$('#q').focus();
	});

	/* UI Stuff */

	/* List types, grid or list (default)*/
	var uiListType = Cookies.getJSON('bcloud_ui');
	var searchList = document.getElementById('search-list');

	function uiSetListType(type){
		$('.filter-list-type').removeClass('active');

		if (type == 'grid'){
			$(searchList).addClass('view-grid');
			$('.filter-list-type.grid').addClass('active');
		} else {
			$(searchList).removeClass('view-grid');
			$('.filter-list-type.list').addClass('active');
		}
	}

	if (uiListType && uiListType.search_browse_type == 'grid'){
		uiSetListType('grid');
	} else {
		uiSetListType('list');
	}

	$('.filter-list-type').on('click', function(){
		if ($(this).attr('data-list-type') == 'grid'){
			uiSetListType('grid');
			setJSONCookie('bcloud_ui', 'search_browse_type', 'grid');
		} else {
			uiSetListType('list');
			setJSONCookie('bcloud_ui', 'search_browse_type', 'list');
		}
	});

	/* Hide site-wide search, kinda confusing */
	$('.search-input').hide();

	/* Resize container so we can have custom scrollbars */
	container_offset = $('#search-container').offset();

	function containerResizeY(window_height){

		var container_height = window_height - container_offset.top;

			if (container_height > parseInt($('#search-container').css("min-height"))) {
				$('#search-container').css(
					{'max-height': container_height + 'px', 'height': container_height + 'px'}
				);
				$('#search-list, #search-hit-container').css(
					{'max-height': container_height + 'px', 'height': container_height + 'px'}
				);
			};
	};

	$(window).on("load resize",function(){
		containerResizeY($(window).height());
	});

| {% endblock %}

| {% block footer_navigation %}{% endblock %}
| {% block footer %}{% endblock %}