<template>
    <div class="relative">
        <input class="form-input w-full block rounded-sm sm:text-sm sm:leading-5"
               placeholder="Search..."
               type="text"
               v-model="searchQuery"
               @keyup="keyUp"
               @keydown.enter='enter'
               debounce="500"
               autocomplete="off"
        />
    </div>
</template>


<script>
export default {
    data() {
        return {
            searchQuery : ''
        }
    },
    methods : {
        search() {
            this.$emit('searchChanged', this.searchQuery);
        },
        keyUp() {
            this.search();
        },
        enter() {
            this.search();
        },
        reset() {
            this.searchQuery = null;
        }
    },
    mounted() {
        window.EventBus.$on('resetSearchQuery', () => this.reset());
    }
}
</script>
