{% extends "base.html" %}
{% block title %}The Research Software Encyclopedia Search{% endblock %}
{% block content %}


<div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-8'>
      <br>
      <div class='form-horizontal'>
        <div class='form-group has-feedback'>
          <div class='col-sm-12'>

<form action="{{ url_prefix }}search" method="get">
	<input class="form-control" type="search" name="q" id="search-input" placeholder="Search..." style="margin-top:5px" autofocus>
        <span class='glyphicon glyphicon-remove form-control-feedback search-cancel-button'></span>
	<i style="color:white; margin-right:8px; margin-left:5px" class="fa fa-search"></i>
	<input type="submit" value="Search" style="display: none;">
</form>

          </div>
        </div>
      </div>
      <br>
      <div class='panel panel-default'>

<p><span id="search-process">Loading</span> results <span id="search-query-container" style="display: none;">for "<strong id="search-query"></strong>"</span></p>

<ul id="search-results"></ul>


       <div class="controls">
         <span style="float:right; margin-right:30px; margin-top:20px" class="badge badge-primary">database: {{ database }}</span><a href="{{ url_prefix }}/api/repos"><span style="float:right; margin-right:30px; margin-top:20px" class="badge badge-primary">api</span></a>
         <hr>
         </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block footer %}
{{ super() }}


<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.8/lunr.min.js"></script>
<script>
window.data = {
	{% for repo in repos %}
	"{{ repo.uid }}": {
	"id": "{{ repo.uid }}",
	"title": "{{ repo.uid }}",
	"url": " {{ repo.html_url }}",
	"content": "{{ repo.description }}"
	}{% if loop.last %}{% else %},{% endif %}{% endfor %}
};


(function () {
	function getQueryVariable(variable) {
		var query = window.location.search.substring(1),
			vars = query.split("&");

		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");

			if (pair[0] === variable) {
				return decodeURIComponent(pair[1].replace(/\+/g, '%20')).trim();
			}
		}
	}

	function getPreview(query, content, previewLength) {
		previewLength = previewLength || (content.length * 2);

		var parts = query.split(" "),
			match = content.toLowerCase().indexOf(query.toLowerCase()),
			matchLength = query.length,
			preview;

		// Find a relevant location in content
		for (var i = 0; i < parts.length; i++) {
			if (match >= 0) {
				break;
			}

			match = content.toLowerCase().indexOf(parts[i].toLowerCase());
			matchLength = parts[i].length;
		}

		// Create preview
		if (match >= 0) {
			var start = match - (previewLength / 2),
				end = start > 0 ? match + matchLength + (previewLength / 2) : previewLength;

			preview = content.substring(start, end).trim();

			if (start > 0) {
				preview = "..." + preview;
			}

			if (end < content.length) {
				preview = preview + "...";
			}

			// Highlight query parts
			preview = preview.replace(new RegExp("(" + parts.join("|") + ")", "gi"), "<strong>$1</strong>");
		} else {
			// Use start of content if no match found
			preview = content.substring(0, previewLength).trim() + (content.length > previewLength ? "..." : "");
		}

		return preview;
	}

	function displaySearchResults(results, query) {
		var searchResultsEl = document.getElementById("search-results"),
			searchProcessEl = document.getElementById("search-process");

		if (results.length) {
			var resultsHTML = "";
			results.forEach(function (result) {
				var item = window.data[result.ref],
					contentPreview = getPreview(query, item.content, 170),
					titlePreview = getPreview(query, item.title);

				resultsHTML += "<li><h4><a href='" + item.url.trim() + "'>" + titlePreview + "</a></h4><p><small>" + contentPreview + "</small></p></li>";
			});

			searchResultsEl.innerHTML = resultsHTML;
			searchProcessEl.innerText = "Showing";
		} else {
			searchResultsEl.style.display = "none";
			searchProcessEl.innerText = "No";
		}
	}

	window.index = lunr(function () {
		this.field("id");
		this.field("title", {boost: 10});
		this.field("url");
		this.field("content");
		for (var key in window.data) {
			this.add(window.data[key]);
		}

	});

	var query = decodeURIComponent((getQueryVariable("q") || "").replace(/\+/g, "%20")),
		searchQueryContainerEl = document.getElementById("search-query-container"),
		searchQueryEl = document.getElementById("search-query");

	searchQueryEl.innerText = query;
        if (query != ""){
   		searchQueryContainerEl.style.display = "inline";
        }

	displaySearchResults(window.index.search(query), query); // Hand the results off to be displayed
})();
</script>
{% endblock %}
