<template>
    <v-sheet
        tile
        color="transparent"
    >

        <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 
                    :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>

        <cs-info-alert 
            v-if="form.formprovider.hasGlobalRequestError"
            color="red"
            icon="mdi-alert"
            :message="form.formprovider.response.message"
            class="my-3"
        />
    </v-sheet>
</template>

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

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

        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>