.search-results(v-if='searchIsFocused || search.length > 1')
.search-results-container
.search-results-help(v-if='search.length < 2')
img(src='/svg/icon-search-alt.svg')
.mt-4 Type at least 2 characters to start searching...
.search-results-loader(v-else-if='searchIsLoading && results.length < 1')
orbit-spinner(
:animation-duration='1000'
:size='100'
color='#FFF'
)
.headline.mt-5 Searching...
.search-results-none(v-else-if='!searchIsLoading && results.length < 1')
img(src='/svg/icon-no-results.svg', alt='No Results')
.subheading No pages matching your query.
template(v-if='results.length > 0')
v-subheader.white--text Found {{response.totalHits}} results
v-list.search-results-items.radius-7(two-line)
template(v-for='(item, idx) of results')
v-list-tile(@click='goToPage(item)', :key='item.id', :class='idx === cursor ? `highlighted` : ``')
v-list-tile-avatar(tile)
img(src='/svg/icon-selective-highlighting.svg')
v-list-tile-content
v-list-tile-title(v-html='item.title')
v-list-tile-sub-title(v-html='item.description')
.caption.grey--text.mt-1(v-html='item.path')
v-list-tile-action
v-chip(label) {{item.locale.toUpperCase()}}
v-divider(v-if='idx < results.length - 1')
v-pagination.mt-3(
v-if='paginationLength > 1'
dark
v-model='pagination'
:length='paginationLength'
)
template(v-if='suggestions.length > 0')
v-subheader.white--text.mt-3 Did you mean...
v-list.search-results-suggestions.radius-7(dense, dark)
template(v-for='(term, idx) of suggestions')
v-list-tile(:key='term', @click='setSearchTerm(term)', :class='idx + results.length === cursor ? `highlighted` : ``')
v-list-tile-avatar
v-icon search
v-list-tile-content
v-list-tile-title(v-html='term')
v-divider(v-if='idx < suggestions.length - 1')
.text-xs-center.pt-5(v-if='search.length > 1')
v-btn(outline, color='orange', @click='search = ``', v-if='results.length > 0')
v-icon(left) save
span Copy Search Link
v-btn(outline, color='pink', @click='search = ``')
v-icon(left) clear
span Close