<template>
    <div class="row" @keyup.enter="submitForm">
        <div class="col">
            <error-message-component class="m-b-20" :error="error"></error-message-component>
            <!--<google-re-captcha-v3-->
                    <!--v-model="parameters.gRecaptchaResponse"-->
                    <!--ref="captcha"-->
                    <!--id="contact_us_id"-->
                    <!--action="contact_us"-->
            <!--&gt;</google-re-captcha-v3>-->
            <div class="row">
                <div class="col">
                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
                        <label class="text-primary">Email Address</label>
                        <div class="controls">
                            <input name="email" type="text" class="form-control fs-12" v-model.trim="parameters.email">
                        </div>
                    </validation-wrapper-component>
                    <validation-wrapper-component :validator="$v.parameters.password">
                        <label class="text-primary">Password</label>
                        <div class="controls">
                            <input name="password" type="password" class="form-control fs-12" v-model="parameters.password">
                        </div>
                    </validation-wrapper-component>
                    <div class="row m-t-15 align-items-center justify-content-center">
                        <div class="col-auto">
                            <p class="muted fs-11 font-arial m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})">Forgot password?</p>
                        </div>
                        <div class="col text-right">
                            <div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm" id="sign-in">Sign In</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import loginFormValidation from '../../../general/mixins/accounts/validation/loginFormValidation'
    export default {
        props: {
            section:{
                type: String,
                required: true
            }
        },
        data() {
            return {
                error: '',
                parameters: {
                    email: this.email,
                    password: ''
                }
            };
        },
        methods: {
          submitForm(){
              this.submit(this.route('api.account.authentication.authenticate.attempt'), 'post', this.section, false, false)
          }
        },
        mixins: [loginFormValidation]
    }

</script>
