<template>

        <div class="highlightBox highlightExempt highlightBoxMargin">

            <div class="row">

                <div class="inputWrap">

                    <input
                            type="checkbox"
                            :id="id"
                            :name="id"
                            :true-value="1"
                            :false-value="0"
                            v-model="is_checked"
                            @change="updateValue"
                    >

                    <label :for="id" v-html="label">
                        <i class="hoverFX"></i>
                    </label>

                </div> <!-- .inputWrap -->

            </div><!-- .row -->

        </div><!-- .Highlight Box -->

</template>



<script>



export default {

    props: [
        "id",
        "label",
        "value",
    ],


    data: function() {
        return {
            is_checked: false
        }
    },


    methods: {

        updateValue: function() {
            this.$emit('input', this.is_checked);
        },

    },

    watch: {
        value: function() {
            this.is_checked = this.value;
        }
    },
}

</script>


