<template>
    <v-row dense v-if="activeRecord">
        <v-col cols="12">
            <cs-text-box 
                ref="FirstControl"
                :control="controls.last_name"
                :errors="errorsManager.ByField('last_name')"
                v-model="activeRecord.last_name"
                @focus="errorsManager.ResetField('last_name')"
                @blur="errorsManager.Validate('last_name')"
            />
        </v-col>

        <v-col cols="12">
            <cs-text-box 
                :control="controls.first_name"
                :errors="errorsManager.ByField('first_name')"
                v-model="activeRecord.first_name"
                @focus="errorsManager.ResetField('first_name')"
                @blur="errorsManager.Validate('first_name')"
            />
        </v-col>
    </v-row>
</template>

<script>
    export default {
        props: {
            editable: {required: true},
        },

        computed: {
            form() {
                return this.editable.form;
            },
        },

        mounted() {
            setTimeout( () => {
                this.$refs.FirstControl.Focus();
            }, 250)
        },

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
        },
        
        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'UserNameInput',
    }
</script>