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

{% block main %}
    <div class="index"> 
        {% if readme_content %}
          <div class="readme-block">
            {% for element in readme_content.elements %}{% if element.raw %}{{ element.raw | safe }}{% elif element.autolink %}<a href="{{ element.autolink.url }}">{{ element.autolink.url }}</a>{% endif %}{% endfor %}
            <hr>
          </div>
        {% endif %}
        {% 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 -->
  <!--
    fuse.js@7+ ships as ESM only; loading it through a classic <script src>
    fails to evaluate the `export` and leaves window.Fuse undefined. Import it
    from a module script and re-expose it as a global so the classic
    doSearch() handler below can call `new Fuse(...)`.
  -->
  <script type="module">
    import Fuse from "https://cdn.jsdelivr.net/npm/fuse.js@{{ cdn.fusejs }}";
    window.Fuse = Fuse;
    fetch('./search_index.json')
      .then(response => response.json())
      .then(data => {
        const fuseOptions = {
          minMatchCharLength: 3,
          keys: ["title"]
        };
        const fuse = new Fuse(data, fuseOptions);
        window.search = function (query, numResults) {
          return fuse.search(query).slice(0, numResults).map(result => [result.item.title, result.item.url]);
        };
      })
  </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 %}