{% extends "base_nav.html" %}
{% load i18n %}
{% load staticfiles %}
{% block "title" %}{% trans "Dashboard" %}{% endblock %}
{% block "css" %}
<link href="{% static 'css/secrets.css' %}" rel="stylesheet">
{% endblock %}
{% block "js" %}
<script src="{% static 'bundled/typeahead.js/dist/typeahead.bundle.min.js' %}"></script>
{% endblock %}
{% block "nav_search" %}active{% endblock %}
{% block "content" %}
<script>
$(document).ready(function() {
	typeahead_search = new Bloodhound({
		datumTokenizer: function(d) {
			return Bloodhound.tokenizers.whitespace(d.val);
		},
		queryTokenizer: Bloodhound.tokenizers.whitespace,
		remote: '{% url 'secrets.secret-search' %}?q=%QUERY'
	});
	typeahead_search.initialize();

	$('.search-group #search').typeahead(
	{
		minLength: 3,
		highlight: true,
	},
	{
		name: 'secrets',
		displayKey: 'name',
		source: typeahead_search.ttAdapter(),
		templates: {
			suggestion: function (datum) {
				var output = '';
				output += '<div class="search_result" onclick="document.location = \'' + datum.url + '\';">';
				output += '<div class="search_result_icons"><i class="fa fa-' + datum.icon + '"></i></div>';
				output += '<div class="search_result_name"><a href="' + datum.url + '">' + datum.name + '</a></div>';
				output += '<div class="goto_icon"><i class="fa fa-arrow-right"></i></div>';
				output += '<div class="clearfix"></div></div>';
				return output;
			}
		}
	});

	$('#search').on('typeahead:selected', function(event, selection) {
		window.location.href = selection.url;
	});

	$('#search').select();
});
</script>
<div class="container container-opaque">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<form action="{% url 'secrets.secret-list' %}" method="GET">
				<div class="input-group input-group-lg search-group">
					<input id="search" name="search" type="text" class="form-control">
					<span class="input-group-btn">
						<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
					</span>
				</div><!-- /input-group -->
			</form>
			<div id="search_results"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-8 col-md-offset-2 hints">
			<div class="alert alert-info">
				<i class="fa fa-info-circle"></i>&nbsp; Start typing three characters or more to search.
				<br><br>
				Use arrow keys to select the desired search result, then hit Enter to view. Hit Enter without selecting a result to go to a linkable search results page.
			</div>
		</div>
	</div>
</div>
{% endblock %}
