<script>
// Including InstantSearch.js library and styling
const loadSearch = function() {
  const loadCSS = function(src) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = src;
    link.media = 'all';
    document.head.appendChild(link);
  };

  var script = document.createElement('script');
  script.setAttribute("type", "text/javascript");
  script.setAttribute("src", "https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js");
  script.addEventListener("load", function() {
    // Instantiating InstantSearch.js with Algolia credentials
    const search = instantsearch({
      appId: '{{ site.algolia.application_id }}',
      apiKey: '{{ site.algolia.search_only_api_key }}',
      indexName: '{{ site.algolia.index_name }}',
      searchParameters: {
        restrictSearchableAttributes: ['title', 'content']
      }
    });

    const hitTemplate = function(hit) {
      const url = hit.url;
      const hightlight = hit._highlightResult;
      const title = hightlight.title && hightlight.title.value  || "";
      const content = hightlight.html && hightlight.html.value  || "";

      return `
        <div class="list__item">
          <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
            <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2>
            <div class="archive__item-excerpt" itemprop="description">${content}</div>
          </article>
        </div>
      `;
    }

    // Adding searchbar and results widgets
    search.addWidget(
      instantsearch.widgets.searchBox({
        container: '.search-searchbar',
        {% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %}
        placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}'
      })
    );
    search.addWidget(
      instantsearch.widgets.hits({
        container: '.search-hits',
        templates: {
          item: hitTemplate,
          empty: '{{ site.data.ui-text[site.locale].search_algolia_no_results | default: "No results" }}',
        }
      })
    );

    if (!search.started) {
      search.start();
    }
  });
  document.body.appendChild(script);

  loadCSS("https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css");
  loadCSS("https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css");
};

// Starting the search only when toggle is clicked
$(document).ready(function() {
  var scriptLoaded = false;

  $(".search__toggle").on("click", function() {
    if (!scriptLoaded) {
      loadSearch();
      scriptLoaded = true;
    }
  });
});
</script>