| {% extends 'layout.html' %}
| {% from '_macros/_asset_list_item.html' import asset_list_item %}
| {% from '_macros/_navigation.html' import navigation_homepage, navigation_project %}
include ../mixins/components

| {% if project %}
| {% set title = 'search-project' %}
| {% else %}
| {% set title = 'search' %}
| {% endif %}

| {% block navigation_tabs %}
| {% if project %}
| {{ navigation_project(project, navigation_links, extension_sidebar_links, title) }}
| {% else %}
| {{ navigation_homepage(title) }}
| {% endif %}
| {% endblock navigation_tabs %}

| {% block navigation_search %}{% endblock navigation_search %}

| {% block page_title %}Search{% if project %} {{ project.name }}{% endif %}{% endblock %}

| {% block head %}
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/video.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') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/video_plugins.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.d-flex(class="{% if project %}search-project{% endif %}")

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

		#pagination.mt-3
		#facets
		#stats.search-list-stats

	.border-left.search-list

		+card-deck()(id='hits', class="m-0 px-2 card-deck-vertical")

	#search-details.border-left.search-details
		#search-error
		#search-hit-container.w-100


| {% raw %}
// Facet template
script(type="text/template", id="facet-template")
	.card.border-0.p-0.m-2
		.card-body.p-3.m-0
			h6.text-muted.facet-title {{ title }}
			| {{#values}}
			a.facet_link.toggleRefine(
				class='{{#refined}}refined{{/refined}}',
				data-facet='{{ facet }}',
				data-value='{{ value }}',
				href='#')
				span
					| {{ label }}
					small.text-black-50.float-right {{ count }}
			| {{/values}}

// 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="{{ 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(){
			loadingBarHide();
			$('#search-error').hide();
			$('#search-hit-container').show();
		})
		.fail(function(data){
			loadingBarHide();
			$('#search-hit-container').hide();
			$('#search-error').show().html('Houston!\n\n' + data.status + ' ' + data.statusText);
		});
	}

	$('body').on('click', '.js-search-hit', function(e){
		e.preventDefault();

		loadingBarHide();
		loadingBarShow();

		displayNode($(this).data('node-id'));
		$('.js-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.
	$('#search-list').hover(function(){
		$('#q').blur();
	});
	$('#search-sidebar').hover(function(){
		$('#q').focus();
	});

	/* UI Stuff */
	/* 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_container %}{% endblock %}
| {% block footer %}{% endblock %}