<template>
	<div class="h-screen flex w-full bg-img">
		<div class="vx-col sm:w-1/2 md:w-1/2 lg:w-3/4 xl:w-3/5 mx-auto self-center">
			<vx-card>
				<div slot="no-body" class="full-page-bg-color">
					<div class="vx-row">
						<div class="vx-col hidden sm:hidden md:hidden lg:block lg:w-1/2 mx-auto self-center">
							<img src="@/assets/images/pages/login.png" alt="login" class="mx-auto">
						</div>
						<div class="vx-col sm:w-full md:w-full lg:w-1/2 mx-auto self-center bg-white">
							<div class="p-8">

								<div class="vx-card__title mb-8">
									<h4 class="mb-4">Login</h4>
									<p>Welcome back, please login to your account.</p>
								</div>

								<vs-input name="email" :danger="errors.has('email')" :danger-text="errors.first('email')"
								val-icon-danger="clear" type="text" icon="icon icon-user" icon-pack="feather"
								label-placeholder="Username" v-model="email" class="w-full mb-6 no-icon-border"
								v-validate="'required|email'" data-vv-validate-on="blur" />

								<vs-input name="password" :danger="errors.has('password')" :danger-text="errors.first('password')" @keydown="handleKey"
								val-icon-danger="clear" type="password" icon="icon icon-lock" icon-pack="feather"
								label-placeholder="Password" v-model="password" class="w-full mb-4 no-icon-border"
								v-validate="'required'" data-vv-validate-on="blur"  />

								<div class="flex flex-wrap justify-between mt-5">
									<vs-checkbox v-model="remember" class="mb-3" style="height: 16px;">Remember Me</vs-checkbox>
									<router-link :to="{ name: 'pageForgotPassword' }">Forgot Password?</router-link>
								</div>

								<!-- Errors during login -->
								<div class="con-text-validation span-text-validation-danger vs-input--text-validation-span v-enter-to my-5"
								style="text-align: center;font-size: 12px;">
									<span class="span-text-validation"> {{error}}</span>
							 	</div>



								<vs-button  type="border" :to="{ name: 'pageRegister' }">Register</vs-button>
								<vs-button class="float-right" @click="login">Login</vs-button>



								<vs-divider position="center" class="my-8"></vs-divider>

								<!--<div class="social-login mb-4 flex flex-wrap justify-between">
									<span>Or Login With</span>
									<div class="social-login-buttons flex">
										<vs-button color="#1551b1" class="mr-4 px-8" icon="icon icon-facebook" icon-pack="feather"></vs-button>
										<vs-button color="#00aaff" class="px-8" icon="icon icon-twitter" icon-pack="feather"></vs-button>
									</div>
								</div>	-->

							</div>
						</div>
					</div>
				</div>
			</vx-card>
		</div>
	</div>
</template>