| {% extends 'layout.html' %}
| {% block page_title %}Users{% endblock %}
| {% block head %}
style.
	span.field-description {
		font-size: smaller;
		color: #999;
	}
	#search-container {
		min-height: 800px !important;
	}
	#search-details, #search-list {
		overflow: auto;
	}
| {% endblock %}

| {% block body %}

#search-container.d-flex
	.search-settings#search-sidebar.bg-light
		input.search-field.p-2.bg-white(
				type="text",
				name="q",
				id="q",
				what="/admin/user",
				autocomplete="off",
				spellcheck="false",
				autocorrect="false",
				placeholder="Search by Full Name, Username...")

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

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

	.border-left.search-list#search-list
		#hits

	#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 {{ 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}}


// Hit template
script(type="text/template", id="hit-template")
	.search-hit.users.cursor-pointer.p-2.border-bottom(data-user-id='{{ objectID }}')
		h6.mb-0.font-weight-bold {{ full_name }}
		small {{ username }}
		small.d-block.search-hit-roles.text-info
			| {{ roles }}


// 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="{{ 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(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.select2.min.js') }}")

script(type="text/javascript").

	// This function is also used in edit_embed.pug.
	function displayUser(userId) {
		$('#hits .active').removeClass('active');
		$("#hits [data-user-id='" + userId + "']").addClass('active');

		var url = '/u/' + userId + '/edit';
		return $.get(url, function(dataHtml){
			$('#search-hit-container')
				.html(dataHtml)
				.show();
		})
		.fail(function(jqXHR, textStatus, errorThrown) {
			var $userbox = $(".search-hit.users[data-user-id='" + userId + "']");
			var $msgbox = $userbox.find('.search-hit-roles');

			if (console) console.log('Error fetching user', userId, '; jqXHR=', jqXHR);
			$userbox.addClass('alert alert-warning');
			if (jqXHR.status == 404) {
				$msgbox.text('This user does not seem to exist.');
			} else {
				$msgbox.text('There was an error fetching the user: ' + jqXHR.responseText + '.')
			}
		})
		;
	}

	$('body').on('click', '.search-hit', function(){
		displayUser($(this).data('user-id'));
	});

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

| {% endblock %}

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