<template>
    <div class="row">
        <div class="col ">
            <div class="col">
                <div class="row m-b-20">
                    <div class="col">
                        <div class="font-heading fs-18 text-primary all-caps">Create Account</div>
                    </div>
                </div>
                <error-message-component class="m-b-20" :error="error"></error-message-component>
                <registration-check-email-form-component section="loginSection" :key="Math.round(+new Date()/1000)"  v-if="step === 1" v-on:updateStatus="updateStatus($event)"></registration-check-email-form-component>
                <registration-form-component section="loginSection"  v-if="step === 2" :key="Math.round(+new Date()/1000)" v-on:updateStatus="updateStatus($event)" :email=parameters.email></registration-form-component>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                error: '',
                step: 1,
                parameters : {
                    email: ''
                },
            }
        },
        methods:{
            updateStatus(event){
                if(event.direction === 'next'){
                    this.parameters.email =event.email;
                    this.step += 1;
                }else if(event.direction === 'back'){
                    this.step -= 1;
                }
            },
        }
    }
</script>
