<style>
	form#searchForm {
		justify-content: center;
	}
	.archive-link {
		text-decoration: none;
	}

	.archive-link:hover,
	.archive-link:focus {
		text-decoration: underline;
	}
</style>
<form id="searchForm" class="pure-form pure-g" action="/search" method="POST">
	<div class="pure-u-1">
		<label for="searchInput">Searchbox at your service :</label>
		<input
			id="searchInput"
			name="query"
			type="search"
			class="pure-input-1"
			placeholder="Type your search's keyword(s) here..."
		/>
	</div>
	<button type="submit" class="pure-button">CLICK ME TO LAUNCH YOUR SEARCH !</button>
</form>

<div id="searchResult">
	{{#not build}}
	<script src="/static/admin/scripts/node-app-search.js"></script>
	{{#if resultLength > 0 && resultLength == 1 }}
	<p>Your search returned 1 post</p>
	{{#elseif resultLength > 1}}
	<p>Your search returned {{resultLength}} posts</p>
	{{/if}}
	<!--Dynamic Markup Separator-->
	{{/not}}
</div>

{{#if results}}
<!--Include the index template-->
{{include("themes/default/layouts/index.html")}}
<!--Dynamic Markup Separator-->
{{#elseif noResults}}
<p class="text-center">
	Sorry, your search didn't return any result.
	<br />
	Please try some other keyword(s) or,
	<br />
	browse the posts in the
	<a class="archive-link" href="/posts">archive</a>
	📦
</p>
{{/if}}
