<template>
    <v-sheet
        tile
        color="transparent"
    >
        <div style="position:absolute; top:-1000px; left:0;">
            <input name="cs-text-box-email" id="cs-text-box" type="text" value="">
            <input name="cs-text-box-password" id="cs-password-box" type="password" value="">
        </div>

        <template v-if="ready">
            <v-row dense>
                <v-col cols="12">
                    <cs-text-box 
                        ref="Email"
                        :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 
                        ref="Password"
                        :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-check-box 
                        :control="controls.rememberme"
                        v-model="activeRecord.remember_me"
                    />
                </v-col>
            </v-row>

        </template>
    </v-sheet>
</template>

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

        data: () => ({
            ready: false,
        }),

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

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

        mounted() {
            setTimeout( () => {
                this.ready = true;
                setTimeout(() => {this.Focus()}, 100);
            }, 150);
            
        },

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

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

        name: 'LoginFormInput',
    }
</script>