{% 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>
<br>
<a href="/plugins">Plugins</a>

{% set path = [] %}
{% set i = namespace(value=0) %}
{{ draw_dir(dataobjs, 0, 1) }}

{% include "markdown-parser.html" %}
<script>
  // search functionality
  {% if search_enabled %}  
    function appendHit(hit) {
      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 += "\n" + window.parser.render(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);
          })
	
        }
      }
    });
  {% endif %}
</script>
{% endblock %}
