.input.text-dark(style="width: 100%") input#query_input( type="search" @input="search_active" placeholder="Search ... " style="width:85%;" ) .spinner(v-if="query.load") div(style="width:100%" v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0") template(v-for="(item, idx) in query.res" ) .col-12.bg-white.text-dark( style="display:flex;align-items:center; border-radius:3px;" :key="'q'+idx" @mouseover="drawer_hover_item(item)" @mouseleave="drawer_hover_item()" @click="drawer_click_item(item)" ) div( v-html="generate_icon(item, 'var(--dark)')") .col-10() | {{ item.name }} .bg-dark.divider( :key="'qdiv'+idx" style="height:1px" ) .col-12.bg-white.text-dark( v-if="query.load==false && query.res.length==0" style="display:flex;align-items:center; border-radius:3px;" ) div( v-html="generate_icon('star', 'var(--dark)')") .col-10() | Add custom .col-12.text-white.text-center( ) {{query.load? `Loading ...` : `Found ${query.res.length} results`}} div(style="width:100%" v-else-if="['flight'].indexOf(query.type)>=0") template(v-for="(item, idx) in query.res" ) .col-12.bg-white.text-dark( style="display:flex;align-items:center; border-radius:3px;" :key="'q'+idx" @mouseover="drawer_hover_item(item)" @mouseleave="drawer_hover_item()" @click="drawer_click_item(item)" ) div( v-html="generate_icon('plane', 'var(--dark)')") .col-10() | {{ item.from }} => {{item.to}} .bg-dark.divider( :key="'qdiv'+idx" style="height:1px" ) div(style="width:100%" v-else) template() .col-12.bg-white.text-dark( style="display:flex;align-items:center; border-radius:3px;") | Unsuppored Query type {{query.type}}