{{ $lunr := resources.Get "/js/lunr.js" | resources.Minify | resources.Fingerprint  }}
<script type="text/javascript" src="{{$lunr.RelPermalink}}"></script>
<script>


    var lunrIndex, $results, pagesIndex;

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split('&');

        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');

            if (pair[0] === variable) {
                return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
            }
        }
    }

    var searchTerm = getQueryVariable('query');

    // Initialize lunrjs using our generated index file
    function initLunr() {
        // First retrieve the index file
        $.getJSON("/search-index.json")
            .done(function(index) {
                pagesIndex = index.results;
                lunrIndex = lunr(function() {
                    this.field("title", { boost: 10 });
                    this.field("tags", { boost: 5 });
                    this.field("categories", { boost: 5 });
                    this.field("content");
                    this.field("snippet");
                    this.ref("uri");

                    pagesIndex.forEach(function (page) {
                        this.add(page)
                    }, this)
                });
            })
            .fail(function(jqxhr, textStatus, error) {
                var err = textStatus + ", " + error;
                console.error("Error getting Hugo index flie:", err);
            });
    }

    // Nothing crazy here, just hook up a listener on the input field
    function initUI() {
        $results = $("#results");
        $("#search").keyup(function() {
            $results.empty();

            // Only trigger a search when 2 chars. at least have been provided
            var query = $(this).val();
            if (query.length < 2) {
                return;
            }

            var results = search(query);

            renderResults(results);
        });
    }

    /**
     * Trigger a search in lunr and transform the result
     *
     * @param  {StringFormatters} query
     * @return {Array}  results
     */
    function search(query) {
        return lunrIndex.search(query).map(function(result) {
            return pagesIndex.filter(function(page) {
                return page.uri === result.ref;
            })[0];
        });
    }

    /**
     * Display the 10 first results
     *
     * @param  {Array} results to display
     */
    function renderResults(results) {
        if (!results.length) {
            return;
        }


        var prefix = '<h3 class="pt3 mt0">Search results: </h3>';
        $results.append(prefix);

        // Only show the ten first results
        results.slice(0, 100).forEach(function(result) {

            console.log(result);

            var html = '<h5 class="mb0 "><a class="semi inverse" href="' + result.uri + '">' + result.title + '</a></h5>';
            html += '<p class="small mb0"><a class="normal inverse brand-2-text" href="' + result.uri + '">' + result.uri + '</a></p>';
            html += '<p class="small">' + result.snippet + ' ...</p>';
            $results.append(html);
        });

        var suffix = '<div class="pb3"></div>';
        $results.append(suffix);
    }

    // Let's get started
    initLunr();

    $(document).ready(function() {
        initUI();
    });


    NetistrarWhiteLabel.configure({
        apiEndpoint: "{{ .Site.Params.backendUrl }}",
        dashboardUrl: "{{ .Site.Params.dashboard_url }}"
    });


</script>