Vue.component('tt-checkbox', {
    props: {
        label: String,
        required: Boolean,
        row: Boolean,
        value: [String, Number, Boolean],
        hint: String,
        additionalProps: Object,
        sm: { type: Boolean, default: false },
    },
    data() {
        return {
            checkedValue: this.value,
        };
    },
    watch: {
        value(val) {
            this.checkedValue = val;
        }
    },
    template: `
      <div class="form-group" :class="{'row': row}">
        <slot name="prepend"></slot>
        <label
            style="width: 100%;text-align: center;"
            :class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}"
            v-if="label"
            :for="label">{{ label }}</label>

        <input type="checkbox"
               :id="label"
               :name="label"
               class="form-control float-left"
               :class="{'form-control-sm': sm, 'col-sm-8': row}"
               :required="required"
               v-bind="additionalProps"
               v-model="checkedValue"
               @input="$emit('input', $event.target.checked ? 1 : 0)"
        >
        <small v-if="hint" class="form-text text-muted">{{ hint }}</small>
      </div>
    `
});