{{ define "title" }}Search{{ end }}
{{ define "main" }}

<article class="center ph3 nested-copy-line-height lh-copy f4 nested-links mw-100 measure-wide pt4 min-vh-100">
   {{ .Content }}
   <input id="search" type="text" placeholder="Search..." class="pa2 br3 ba bw1 b--gray lh-title f3 sans-serif w-100">
   <p>Type a search above to see results below:</p>
   <ul id="results" class=""></ul>
</article>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.2.1/lunr.min.js"></script>
    <script type="text/javascript">
    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("{{ "index.json" | absURL }}")
            .done(function(index) {
                pagesIndex = index;
                // console.log("index:", pagesIndex);
                lunrIndex = lunr(function() {
                    this.field("title", { boost: 10 });
                    this.field("categories", { boost: 5 });
                    this.field("keywords");
                    this.field("content");
                    this.field("uri");
                    this.ref("uri");

                    pagesIndex.forEach(function (page) {
                        this.add(page)
                    }, this)
                });
            })
            .fail(function(jqxhr, textStatus, error) {
                var err = textStatus + ", " + error;
                console.error("Error fetching Hugo search index JSON file:", 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  {String} 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;
        }

        // Only show the first results
        results.slice(0, 20).forEach(function(result) {
            var $result = $("<li>");
                $result.append($('<a>', {
                class: 'no-underline dim link',
                href: result.uri,
                text: result.title
            }));
            $results.append($result);
        });
    }

    // Let's get started
    $(document).ready(function() {
       initLunr();
       initUI();
    });
    </script>
{{ end }}