{% extends "__builtins/base.html" %}
{% import "__builtins/macros.html" as macros %}

{% block main %}
    <div class="index">
        {% if build_search_index == true %}
          <div class="search-block">
              <span class="icon" />
              <input
                type="text"
                id="search-input"
                onkeyup="doSearch()"
                placeholder="Search by title..."
                />
              <ul id="search-results"></ul>
          </div>
        {% endif %}
        <div class="tags-block">
            {{ macros::tag_links(tags = tags, slice_size = 15) }}
        </div>
        <div class="links-block">
            <p class="sort-key">Sort by - {{ sort_key }}</p>
            {{ macros::scrap_links(scraps = scraps) }}
        </div>
        <div class="paging-arrows">
            {% if prev %}
                <a class="prev" href="{{ prev }}">prev</a>
            {% endif %}
            {% if next %}
                <a class="next" href="{{ next }}">next</a>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block script %}
  {% if build_search_index == true %}
  <!-- For search scraps -->
  <script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>
  <script type="module">
    import search_index from './search_index.json' with { type: "json" };
    const fuseOptions = {
      minMatchCharLength: 3,
      keys: ["title"]
    };
    const fuse = new Fuse(search_index, fuseOptions);
    const search = function (query, numResults) {
      return fuse.search(query).slice(0, numResults).map(result => [result.item.title, result.item.url]);
    };
    window.search = search;
  </script>
  <script>
    function doSearch() {
      let value = document.getElementById("search-input").value;
      console.log(`Search query: ${value}`);

      // Retrieve 5 results
      const results = search(value, 5);

      console.log(`Results: ${results}`);

      let ul = document.getElementById("search-results");
      ul.innerHTML = "";

      results.forEach((result, index) => {
        var li = document.createElement("li");

        let [title, url] = result;
        console.log(`Title: ${title}, URL: ${url}`);
        let elemlink = document.createElement('a');
        elemlink.innerHTML = title;
        elemlink.setAttribute('href', url);
        li.appendChild(elemlink);
        li.style.top = `${(index * 30) - 16}px`;
        ul.appendChild(li);
      })
    }
  </script>
  {% endif %}
{% endblock %}