{% extends "base.html" %}
{% block content %}

{% if search_enabled %}
	<input type="text" id="searchBar">
	<ul id="searchHits">
{% endif %}
	
</ul>

<a href="/bookmarks/new">New Bookmark</a>
<a href="/notes/new">New Note</a>

<p>
    Sync with <a href="/pocket">Pocket</a>
</p>
{% set path = [] %}
{% set i = namespace(value=0) %}
{{ draw_dir(dataobjs, 0, 1) }}

</script>
<script>
	// search functionality
	{% if search_enabled %}	
		function appendHit(hit,  query) {
			let hitsDiv = document.getElementById("searchHits");
			let hitLi = document.createElement("li");
			let body = document.createElement("div");
			if ("highlight" in hit)
			{
				for(let i = 0; i < hit["highlight"].length; i++)
				{
					body.innerHTML += hit["highlight"][i];	
				}
			}
			let p = document.createElement("p"), a = document.createElement("a"), hitText = '';
			p.innerHTML = hitText, a.textContent = hit["title"], a.href = `/dataobj/${hit['id']}`;
			hitLi.append(a);
			hitLi.append(p);
			hitLi.append(body);
			hitsDiv.appendChild(hitLi);
		}
		let input = document.getElementById("searchBar");
		input.addEventListener('input', async function(e) {
			let query = input.value;
			if (input.value !== "")
			{
				let searchQuery = await fetch(`${SCRIPT_ROOT}/search?query=${input.value}`, {
					"method": "GET"
				});
				if (searchQuery.ok && query == input.value) {	
					let data = await searchQuery.json(), i = 0;
					document.getElementById("searchHits").innerHTML = "";
					data.forEach(function(hit)
					{
						appendHit(hit, input.value);
					})
				}
			}
		});
	{% endif %}
</script>
{% endblock %}
