{{ define "main" }}

  {{ "<!-- page title -->" | safeHTML }}
  <section class="section bg-dark">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto text-center">
          {{ with .Site.Params.banner.title }} <h1 class="text-white mb-4">{{ . }}</h1> {{ end }}
          {{ with .Site.Params.banner.placeholder }} <input id="search" class="form-control" placeholder="{{ . }}"> {{ end }}
            {{ "<!-- Javascript -->" | safeHTML }}
            <script>
              $(function() {
                var projects = [
                  {{ range .Data.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>
  </section>
  {{ "<!-- /page title -->" | safeHTML }}

  {{ "<!-- details page -->" | safeHTML }}
  <section class="single section bg-gray pb-0">
    <div class="container">
      <div class="row">
        <div class="col-lg-3">
          <div class="mb-5 bg-white p-4 sticky-top">
            <a href="{{ .Permalink }}">
              <h4 class="mb-4">{{ .Title }}</h4>
            </a>
            <ul class="list-styled">
              {{ range .Data.Pages }}
              <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
              {{ end }}
            </ul>
          </div>
        </div>
        <div class="col-lg-9">
          <div class="p-5 bg-white">
              <h2>{{ .Title }}</h2>
              <div class="bg-gray p-4">
                  <h3 class="mt-0">Article</h3>
                  <ul class="list-unstyled">
                    {{ range .Data.Pages }}
                    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
                    {{ end }}
                  </ul>
              </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  {{ "<!-- /details page -->" | safeHTML }}

{{ end }}