<template>
    <div class="search-box" @click="active = true">
        <i class="isax isax-search-normal-1" />
        <template v-if="active">
            <InputText v-model="q" :placeholder="$t('searchIn')" autofocus @blur="active = false"
                @keypress.enter="search" />
        </template>
        <template v-else>
            <span>{{ $t("searchIn") }}</span>
            <img src="/images/logo-search.svg" />
        </template>
    </div>
</template>

<script setup>
const route = useRoute()
const router = useRouter()
const active = ref(false);
const q = ref(route.query.q || '');

const search = () => router.push({ path: '/search', query: { q: q.value } })
</script>

<style lang="scss">
.search-box {
    @apply grow flex gap-1.5 items-center h-10 bg-[#F2F2F2] rounded-[0.4rem] px-3;

    input {
        @apply h-full text-xs px-0 w-auto bg-transparent border-0 rtl focus:border-0 focus:shadow-none #{!important};
    }

    i {
        @apply text-lg ml-1.5;
    }

    span {
        @apply text-[#5D5D5D] text-xs font-vazir;
    }

    img {
        @apply w-24 h-5;
    }
}
</style>
