{% extends "base.html" %}
{% block content %}
<script>
    const searchDocuments =  {{ search_documents | safe }};
    const searchIndex = {{ search_index | safe }};

    const idx = lunr.Index.load(searchIndex);

    function displaySearchResults() {
        const query = new URLSearchParams(window.location.search).get('query');

        if (query) {
            document.getElementById('mainInputQuery').value = query;

            const results = idx.query(function (q) {
              words = query.split(" ");
              for (n in words) {
                const word = words[n];

                if (!word) {
                  continue;
                }

                // look for an exact match and apply a large positive boost
                q.term(word, { usePipeline: true, boost: 100 })

                // look for terms that match the beginning of this queryTerm and apply a medium boost
                q.term(word + "*", { usePipeline: false, boost: 10 })
              }
            });

            const searchResults = document.getElementById('searchResults');

            if (results.length > 0) {
                let resultList = ''
                for (const n in results) {
                    // Use the unique ref from the results list to get the full item
                    // so you can build its <li>
                    const doc = searchDocuments[results[n].ref]
                    resultList += '<h5 class="title is-5 mt-3"><a href="' + doc.url + '">' + doc.package + '</a></h5>'
                    // Add a short clip of the content
                    resultList += '<p>' + doc.content.substring(0, 150) + '...</p><hr />'
                }
                searchResults.innerHTML = resultList
            } else {
                searchResults.innerHTML = '<p>No search results.</p>';
            }
        }
    }

    window.addEventListener("load", displaySearchResults);
</script>

  <div>
    <p class="block">
      Enter a query to search this documentation.
    </p>
    <div class="field is-horizontal">
      <form class="field-body">
        <div class="field">
          <p class="control is-expanded">
            <input id="mainInputQuery" type="text" name="query" class="input" placeholder="Search query">
          </p>
        </div>
        <div class="field">
          <p class="control is-expanded">
            <input type="submit" class="button is-primary" value="Search" />
          </p>
        </div>
      </form>
    </div>
    <div class="block mt-6">
      <div id="searchResults"></div>
    </div>
  </div>
{% endblock %}