{{ define "content" }}

<!-- needed script magic -->
<script src="/js/jquery-3.4.0.js"></script>
<script src="/js/fuse.js"></script>
<script src="/js/jquery.mark.js"></script>
<script src="/js/search.js"></script>

<!-- search content -->
<section class="container page">

<header>
    <h1>Search</h1>
</header>

<article>

<form action="{{ "search" | absURL }}">
    <input id="search-query" name="s" placeholder="Search..."/>
</form>

<div id="search-results">
</div>

<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
<script id="search-result-template" type="text/x-js-template">
    <div id="summary-${key}">
      <h4><a href="${link}">${title}</a></h4>
      <p>${snippet}</p>
      ${ isset tags }<p>Tags: ${tags}</p>${ end }
      ${ isset categories }<p>Categories: ${categories}</p>${ end }
    </div>
</script>

</article>

</section>

{{ end }}