@extends('layouts.base_login')

@section('inner_content')
    <transition-component group enter-class="animate__animated animate__fadeInRightBig animate__faster" leave-class="animate__animated animate__fadeOutRightBig" class="h-100">
        <div class="row h-100 m-auto" key="1" v-show="!$store.getters.isShowing('resetPasswordSuccess')">
            <div class="col d-flex align-items-start flex-column">
                <div class="row invisible">
                    <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="animate__animated animate__fadeInUpBig animate__faster" leave-class="animate__animated animate__fadeOutRightBig">
                                    <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('resetPasswordSection')"></loading-component>
                                    <div class="row" key="2" v-show="!$store.getters.isLoading('resetPasswordSection')">
                                        <div class="col all-caps">
                                            <div class="row  m-l-0">
                                                <div class="col p-l-50">
                                                    <h5 class="font-lato light animate__animated animate__fadeInRightBig animate__slow" style=" line-height: 50px; letter-spacing: 5px; ">Reset your password</h5>
                                                </div>
                                            </div>
                                            <reset-password-form-component section="resetPasswordSection" token="{{$token}}"></reset-password-form-component>
                                        </div>
                                    </div>
                                </transition-component>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-auto m-b-25">
                    <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('resetPasswordSuccess')">
            <div class="col">
                <div class="row m-b-20 animate__animated animate__fadeInDownBig">
                    <div class="col">
                        <i class="fa fa-check-circle animate__animated animate__tada animate__slower animate__infinite fs-70 text-success"></i>
                    </div>
                </div>
                <div class="row animate__animated animate__fadeInLeftBig">
                    <div class="col">
                        <h5 class="all-caps fs-35 m-b-15 text-success">Password Changed</h5>
                    </div>
                </div>
                <div class="row animate__animated animate__fadeInRightBig">
                    <div class="col">
                        <small class="muted font-lato all-caps">Your password has been changed successfully</small>
                    </div>
                </div>
                <div class="row m-t-30 animate__animated animate__fadeInUpBig animate__slow">
                    <div class="col">
                        <a :href="route('login')" @click="$store.dispatch('toggleSection', {name: 'resetPasswordSuccess', status: false});$store.dispatch('toggleLoading', {name: 'resetPasswordSection', status: true})"><small class="b-a b-thick b-success text-success all-caps p-t-10 p-b-10 p-r-35 p-l-35 inline bold">Go to login</small></a>
                    </div>
                </div>
            </div>
        </div>
    </transition-component>
@endsection