<template>
    <div class="wrapper">
        <span class="icon">
            <img :src="searchIconSrc">
        </span>
        <input type="search" class="form-control light" ref="input" :value="value" :placeholder="placeholder" :title="placeholder" @input="update()">
        <span class="clear-search" @click="clear()">
            <img :src="clearIconSrc">
        </span>
    </div>
</template>

<script>
    import SearchIconSvg from '../../img/icons/search.svg'
    import ClearIconSvg from '../../img/icons/cross.svg'


    export default {
        props: {
            value: String,
            placeholder: String
        },
        data() {
            return {
                searchIconSrc: SearchIconSvg,
                clearIconSrc: ClearIconSvg
            }
        },
        methods: {
            clear() {
                this.$refs.input.value = "";
                this.$emit('input', this.$refs.input.value)
            },
            update() {
                this.$emit('input', this.$refs.input.value)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .wrapper {
        margin-right: -11px;
    }

    .icon {
        width: 24px;
        height: 24px;
        display: inline-block;
        margin-right: -40px;
        position: relative;
        top: 9px;
    }

    .clear-search {
        width: 16px;
        height: 16px;
        display: inline-block;
        cursor: pointer;
        margin-left: -40px;
        position: relative;
        top: 4px;
    }

    input {
        display: inline-block;
        padding-left: 45px !important;
        padding-right: 45px !important;
    }
</style>