@extends('layouts.base_login')

@section('inner_content')
    <transition-component group enter-class="animated fadeInRightBig faster" leave-class="animated fadeOutRightBig" class="h-100">
        <div class="row h-100 m-auto" key="1" v-show="!$store.getters.isShowing('loginSuccess') && !$store.getters.isShowing('forgetPasswordSuccess')">
            <div class="col d-flex align-items-start flex-column">
                <div class="row invisible" v-if="!$store.getters.isShowing('registrationForm')">
                    <div class="col-auto p-l-0 p-r-0 ml-auto" style="background-color: rgba(255,255,255,0.2);">
                        <div class="text-white font-lato lightest" style=" font-size: 150px; font-weight: 100; margin-right: -17px; margin-left: -183px; ">...</div>
                    </div>
                </div>
                <div class="row w-100">
                    <div class="col">
                        <div class="row">
                            <div class="col no-padding relative">
                                <transition-component group enter-class="animated fadeInUpBig faster" leave-class="animated fadeOutRightBig">
                                    <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('loginSection')"></loading-component>
                                    <transition-component key="2" group enter-class="animated fadeInRightBig faster" leave-class="animated fadeOutUpBig" v-show="!$store.getters.isLoading('loginSection')">
                                        <div class="row" key="1" v-show="!$store.getters.isShowing('forgetPassword')" >
                                            <div class="col all-caps">
                                                <login-section-component section="loginSection"></login-section-component>
                                            </div>
                                        </div>
                                        <div class="row" key="2" v-show="$store.getters.isShowing('forgetPassword')" >
                                            <div class="col all-caps">
                                                <div class="row  m-l-0">
                                                    <div class="col p-l-50">
                                                        <h5 class="font-lato light lh-40 animated fadeInLeftBig slow" style="letter-spacing: 5px; ">Did you forget your password?</h5>
                                                    </div>
                                                </div>
                                                <div class="row  m-l-0 m-b-20  animated fadeInRightBig slow">
                                                    <div class="col p-l-50">
                                                        <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Enter your email address you're using for your account below<br>and we will send you a password reset link</p>
                                                    </div>
                                                </div>
                                                <forget-password-form-component section="loginSection"></forget-password-form-component>
                                            </div>
                                        </div>
                                    </transition-component>
                                </transition-component>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-auto m-b-25 animated fadeInRightBig">
                    <div class="col font-lato p-l-50">
                        <div class="row">
                            <div class="col">
                                <p class="all-caps fs-10 m-b-5" style="letter-spacing: 2px;">Support:</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p class="all-caps no-margin fs-8 lh-18" style="letter-spacing: 2px;">To obtain access to this site or for any questions about its<br>use submit an email message to <span class="text-underline text-primary bold">info@izyim.com</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row align-items-center justify-content-center h-100 bg-white text-center" key="2" v-show="$store.getters.isShowing('loginSuccess')">
            <div class="col">
                <div class="row m-b-20 animated fadeInRightBig">
                    <div class="col">
                        <i class="fa fa-user-circle-o animated pulse slower infinite fs-60 text-success"></i>
                    </div>
                </div>
                <div class="row animated fadeInLeftBig" style="height: 50px;">
                    <div class="col">
                        <loading-component style="height: 40px;" key="1" color="success"></loading-component>
                    </div>
                </div>
                <div class="row animated fadeInUpBig fast">
                    <div class="col">
                        <h5 class="all-caps fs-35 m-b-15 text-success">Login Successful</h5>
                    </div>
                </div>
                <div class="row animated fadeInUpBig">
                    <div class="col">
                        <small class="muted font-lato all-caps">Please wait for redirect</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row align-items-center justify-content-center h-100 bg-white text-center" key="3" v-show="$store.getters.isShowing('forgetPasswordSuccess')">
            <div class="col-10">
                <div class="row m-b-20 animated fadeInDownBig">
                    <div class="col"><i class="fa fa-lock animated swing slower infinite fs-80 text-primary"></i></div>
                </div>
                <div class="row animated fadeInLeftBig">
                    <div class="col">
                        <h5 class="all-caps fs-35 m-b-15 text-primary" style="letter-spacing: 2px;">reset your password</h5>
                    </div>
                </div>
                <div class="row animated fadeInRightBig">
                    <div class="col"><small class="font-lato all-caps light" style="letter-spacing: 2px;">we have sent a reset password email to <span class="text-success" v-text="$store.getters.getResetPasswordEmail"></span><br>Please click the reset password link to set your new password.</small></div>
                </div>
                <div class="row m-t-30 animated fadeInUpBig slow">
                    <div class="col"><small class="hint-text font-lato all-caps fs-10" style="letter-spacing: 1px;"><span class="text-danger bold m-r-5">didn't receive the email yet ?</span> Please check your spam folder, or <span class="text-success text-underline bold pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPasswordSuccess', status: false})">resend the email</span></small></div>
                </div>
                <div class="row m-t-50 animated fadeInUpBig slower">
                    <div class="col"><small class="hint-text font-lato all-caps fs-10" style="letter-spacing: 1px;">Did you remember your password? Go back to <span class="text-underline text-primary bold pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPasswordSuccess', status: false});$store.dispatch('toggleSection', {name: 'forgetPassword', status: false})">login</span></small></div>
                </div>
            </div>
        </div>
    </transition-component>
@endsection