<template>
    <v-sheet>

        <v-row
            dense
        >
            <v-col cols="12">
                <cs-text-box 
                    ref="Name"
                    :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-row>

        <v-row
            dense
        >
            <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>

        <v-row
            dense
        >
            <v-col cols="12">
                <cs-text-box 
                    :control="controls.email"
                    :errors="errorsManager.ByField('email')"

                    v-model="activeRecord.email"
                    
                    @focus="errorsManager.ResetField('email')"
                    @blur="errorsManager.Validate('email')"
                />
            </v-col>
        </v-row>

        <v-row dense>
            <v-col cols="12">
                <cs-password-box 
                    :control="controls.password"
                    :errors="errorsManager.ByField('password')"

                    v-model="activeRecord.password"
                    
                    @focus="errorsManager.ResetField('password')"
                    @blur="errorsManager.Validate('password')"
                />
            </v-col>
        </v-row>

        <v-row dense>
            <v-col cols="12">
                <cs-password-box 
                    :control="controls.password_confirmation"
                    :errors="errorsManager.ByField('password_confirmation')"

                    v-model="activeRecord.password_confirmation"
                    
                    @focus="errorsManager.ResetField('password_confirmation')"
                    @blur="errorsManager.Validate('password_confirmation')"
                />
            </v-col>
        </v-row>

        <v-row dense>
            <v-col cols="12" class="d-flex" align-center>
                <cs-check-box 
                    class="mr-2"
                    :control="controls.agree"
                    :errors="errorsManager.ByField('agree')"

                    v-model="activeRecord.agree"
                />

                <a href="#">Termeni și condiții</a>
            </v-col>
        </v-row>

    </v-sheet>
</template>

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

        computed: {
            form() {
                return this.app.forms.Register;
            }
        },

        methods: {
            Focus() {
                this.$refs.Name.Focus();
            }
        },

        mounted() {
            this.Focus();
        },

        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
            CsPasswordBox: require('@CsVueComp/controls/texts/CsPasswordBox').default, 
            CsCheckBox: require('@CsVueComp/controls/checks/CsCheckBox').default, 
        },

        name: 'RegisterFormInput',
    }
</script>