<template>
    <tr id="connection_name-4">
        <td style="width: 20px;"><i class="fa fa-times-circle validation-icon" v-if='invalid' :id="'ico_' + id" :name="'ico_' + id"></i></td>
        <td style="width: 150px;"><span class="text-dark label"><strong>Every</strong><br></span></td>
        <td><input type="number" :id="id" class="form-control-sm form-control input-form" :value="value" :attribute="name" :label="label" :group="group" :placeholder="placeholder" @input="$emit('update:value', $event.target.value)" @blur="$emit('blur')"></td>
        <td style="width: 150px;"><span class="text-dark label"><strong>{{label}}</strong><br></span></td>
        <td style="width: 20px;"></td>
    </tr>
</template>
<script lang="ts">
export default {
    name: 'Every',
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        label: { type: String, default: '' },
        value: { type: String, default: '' },
        placeholder : { type: String, default: '' },
        group: { type: String, default: '' },
        type: { type: String, default: 'text' },
        invalid: { type: Boolean, default: false },
    }

}
</script>
<style scoped>
.input-form{
    background: var(--input-background-color);
    border-radius: 0px;
    border-style: none;
    border-bottom: 1px dashed #d1d3e2;
    font-size: var(--input-label-font-size);
}

.validation-icon{
    color: #946464;
}

.label{
    font-size: var(--input-label-font-size);
    color: var(--label-form-color);
}
</style>