<template>
	<div class="form-group" :class="{'has-error': form.errors.has(input_name)}">
        <label v-if="label" for="name">{{ label }}</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">{{ icon }}</span>
            </div>
             <input type="text" 
                class="form-control" 
                :placeholder="placeholder" 
                v-model="form[input_name]"
                @keydown="form.errors.clear(input_name)"
                @keypress="isNumber($event)"
                @input="$emit('clicked')"
                :readonly="readonly"
            >
        </div>
        <div class="text-danger text-left" v-if="form.errors.has(input_name)" v-text="form.errors.get(input_name)"></div>
    </div>
</template>

<script type="text/javascript">
	export default {
		props: ['input_name', 'form', 'icon', 'placeholder', 'label', 'readonly'],
        methods: {
            isNumber($event) {
                let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
                if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
                    $event.preventDefault();
                }
            }
        }
	}
</script>