<template>
    <form class="d-none d-sm-inline-block" @submit.prevent="search">
        <div class="input-group input-group-navbar">
            <input type="text" class="form-control" placeholder="Search…" aria-label="Search" v-model="query"
                   ref="search-text"/>
            <button class="btn" type="button" @click.prevent="search">
                <b-icon-search class="bi-valign-middle"></b-icon-search>
            </button>
        </div>
    </form>
</template>

<script>

import * as BIcons from "bootstrap-icons-vue";

export default {
    name: "SearchBox",
    components: {
        ...BIcons
    },
    model: {
        prop: "query",
        event: "change"
    },
    data() {
        return {
            query: ""
        }
    },
    methods: {
        search() {
            if (this.query.length > 0)
                this.$router.push("/search/" + encodeURIComponent(this.query));
            else
                this.$refs["search-text"].focus();
        }
    },
    watch: {
        query() {
            //emit event
            this.$emit("change", this.query);
        }
    },
    mounted() {
        //console.log(this.$route)
        //console.log(this.$route.params.query)
        this.query = decodeURIComponent(this.$route.params.query || encodeURIComponent(""));
    }
}
</script>

<style scoped>


.input-group-navbar .btn, .input-group-navbar .form-control {
    height: calc(2.0875rem + 2px);
    background: #f7f7fc;
    box-shadow: none;
    border: 0;
    padding: .35rem .75rem;
}
</style>