{{ "<!-- banner -->" | safeHTML }}
<div class="container">
    <div class="row">
    <div class="col-lg-8 text-center mx-auto">
    <h1 class="text-white mb-3">{{ .Site.Params.banner.title }}</h1>
    <p class="text-white mb-4">{{ .Site.Params.banner.description }}</p>
        <div class="position-relative">
        <input id="search" class="form-control" placeholder="{{ .Site.Params.banner.placeholder }}">

        <!-- Javascript -->
        {{ $currentNode := . }}
        {{ $currentNode.Scratch.Set "pages" .Site.Pages }}
        {{ $pages := ($currentNode.Scratch.Get "pages") }}
        <script>
            $(function() {
            var projects = [
                {{ range $pages }}
                {
                    value: "{{ .Title }}",
                    label: "{{ .Title }}",
                    url:"{{ .Permalink }}"
                },
                {{ end }}
            ];
            $( "#search" ).autocomplete({
                minLength: 0,
                source: projects,
                focus: function( event, ui ) {
                    $( "#search" ).val( ui.item.label );
                    return false;
                },
                select: function( event, ui ) {
                    $( "#search" ).val( ui.item.label );
                    $( "#project-id" ).val( ui.item.value );
                    return false;
                }
            })
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li>" )
                .append( "<a href=" + item.url + " + \" &quot;\" +  >" + item.label + "</a>" )
                .appendTo( ul );
            };
            });
        </script>
        </div>
    </div>
    </div>
</div>
{{ "<!-- /banner -->" | safeHTML }}