@extends('layouts.base_login')

@section('inner_content')
    <transition-component group enter-class="animate__animated animate__fadeInRightBig animate__faster" leave-class="animate__animated animate__fadeOutRightBig">
        <div class="row" key="1">
            <div class="col-12 col-md p-l-0 p-r-0 p-t-15 p-b-15">
                <div class="h-100 bg-white">
                    <div class="row m-l-0">
                        <div class="col">
                            <div class="row">
                                <div class="col-4 d-none d-md-inline padding-25 bg-primary">
                                    <div class="row h-100 align-items-center justify-content-center text-center">
                                        <div class="col">
                                            <div class="row m-b-10">
                                                <div class="col">
                                                    <div class="font-heading text-white fs-20 all-caps bold lh-25">We Are Glad</div>
                                                    <div class="font-heading text-white fs-12 all-caps m-b-20 lh-25">You've Decided To join Us</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <img src="{{asset('images/2853457.png')}}" class="w-100"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-l-50 p-r-50 p-t-30 p-b-30">
                                    <loading-component style="height: 350px;" key="1" color="primary" v-show="uiStore.isLoading('loginSection')"></loading-component>
                                    <div class="row" v-show="!uiStore.isLoading('loginSection')">
                                        <div class="col">
                                            <registration-form-component section="loginSection"></registration-form-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition-component>
@endsection
