.col-12.input.text-dark
    input#query_input(
        type="search"
        @input="search_active"
        @focus="search_active"
        placeholder="Search ... "
        style="width:85%;"
        :disabled="query.note"
    )
    .spinner(v-if="query.load")

div(v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0")
    template(v-for="(item, idx) in query.res" )
        .query-result.col-12.bg-white.text-dark(
            :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" )
    .query-result.col-12.bg-white.text-dark(
        v-if="query.load==false && query.res.length==0" )
        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(v-else-if="['flight'].indexOf(query.type)>=0")
    template(v-for="(item, idx) in query.res" )
        .query-result.col-12.bg-white.text-dark(
            :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(v-else)
    template()
        .query-result.col-12.bg-white.text-dark()
        | Unsuppored Query type {{query.type}}