#header-container
	nav.nav.has-shadow.stickyscroll#header
		.nav-left
			block rootNavLeft
				a.nav-item.is-brand(href='/')
					img(src='/favicons/android-icon-96x96.png', alt='Wiki')
				a.nav-item(href='/')
					h1.title Wiki
		.nav-center
			block rootNavCenter
				.nav-item
					p.control(v-bind:class="{ 'is-loading': searchload > 0 }")
						input.input#search-input(type='text', v-model='searchq', @keyup.esc='closeSearch', @keyup.down='moveDownSearch', @keyup.up='moveUpSearch', @keyup.enter='moveSelectSearch', debounce='400', placeholder='Search...')
		span.nav-toggle
			span
			span
			span
		.nav-right.nav-menu
			block rootNavRight
				i.nav-item#notifload

	.box.searchresults.animated(v-show='searchactive', transition='slide', v-cloak, style={'display':'none'})
		.menu
			p.menu-label
				| Search Results
			ul.menu-list
				li(v-if="searchres.length === 0")
					a: em No results matching your query
				li(v-for='sres in searchres')
					a(href='/{{ sres.document.entryPath }}', v-bind:class="{ 'is-active': searchmovekey === 'res.' + sres.document.entryPath }") {{ sres.document.title }}
			p.menu-label(v-if='searchsuggest.length > 0')
				| Did you mean...?
			ul.menu-list(v-if='searchsuggest.length > 0')
				li(v-for='sug in searchsuggest')
					a(v-on:click="useSuggestion(sug)", v-bind:class="{ 'is-active': searchmovekey === 'sug.' + sug }") {{ sug }}