<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">
	
	<input type="hidden" name="csrf" data-v-csrf>
	
	<div class="login-form" data-v-if-not="component.user_id">
		
		<div class="mb-3">
			<input type="email" name="email" value placeholder=" " id="user-email" class="form-control label-over" data-v-user-email required>
			<label class="form-label" for="user-email">E-Mail Address</label>
		</div>
		
		<div class="mb-3">
			
			<div class="input-group">
			  <input type="password" minlength="4" autocorrect="off" autocomplete="current-password" class="form-control label-over" placeholder=" "  id="user-password" name="password"  value="" aria-label="Password" required>
			  <label class="form-label" for="user-password">Password</label>
			  <button class="btn btn-sm px-3 border border-start-0" type="button" onclick="togglePasswordInput(this, 'user-password')"><i class="la la-eye-slash"></i></button>
			</div>
		</div>
		
		<button type="submit" value="Login" class="btn btn-primary py-2 btn-login@@if (typeof btnClass !== "undefined"){ @@btnClass}">
			
			<span class="loading d-none">
				<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
				</span>
				<span>Authenticating</span>...
			</span>

			<span class="button-text">
				Login <i class="la la-arrow-right ms-2"></i>
			</span>
		
		</button>	
		<div class="my-2"></div>
		<a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgot your password?</a>
		
		<div class="my-2"></div>
		<!--
		<a>
			<span class="btn btn-secondary btn-sm">
				  <i class="lab la-google la-lg"></i>
			</span>
		</a>
		<a>
			<span class="btn btn-secondary btn-sm">
			  <i class="lab la-facebook la-lg"></i>
			</span>
		</a> -->
		<hr class="text-secondary">
		<span>Don’t have an account?</span><br>
		<a href="/user/signup" data-v-url="user/signup/index">Register Account</a> <span class="text-body-tertiary">|</span> <a href="/user/login" data-v-url="user/login/index">Login</a>						
					
	</div>							
	
	
	<div class="user-form" data-v-if="component.user_id">
		  <div class="text-center" data-v-if="user.first_name">Welcome <b data-v-user-first_name data-filter-capitalize>John</b> <b data-v-user-last_name data-filter-capitalize>Doe</b></div>
		  <div class="text-center" data-v-if-not="user.first_name">Welcome <b data-v-user-username>johndoe</b></div>
		  
		  <div class="dropdown-divider opacity-50 my-3"></div>

		  <ul class="m-3 list-unstyled">
			<li><a href="user" data-v-url="user/index"><i class="la la-user la-lg text-muted m-1"></i><span>My account</span></a></li>
			<li><a href="user/comments" data-v-url="user/comments/index"><i class="la la-comment la-lg text-muted m-1"></i><span>Comments</span></a></li>
			<li><a href="user/orders" data-v-url="user/orders/index"><i class="la la-shopping-bag la-lg text-muted m-1"></i><span>Orders</span></a></li>
			<li><a href="user/downloads" data-v-url="user/downloads/index"><i class="la la-hand-holding-heart la-lg text-muted m-1"></i><span>Downloads</span></a></li>
			<li><a href="user/wishlist" data-v-url="user/wishlist/index"><i class="la la-download la-lg text-muted m-1"></i><span>Wishlist</span></a></li>
			<li><a href="user/profile" data-v-url="user/profile/index"><i class="la la-cogs la-lg text-muted m-1"></i><span>Profile</span></a></li>
		  </ul>									


		<input type="hidden" name="logout">
		
		<button type="submit" value="logout" class="btn btn-sm btn-primary@@if (typeof btnClass !== "undefined"){ @@btnClass}">
			
			<span class="loading d-none">
				<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
				</span>
				<span>Loading ...</span>...
			</span>

			<span class="button-text">
				<i class="la la-sign-out-alt la-lg m-1"></i><span>Log out</span></a>
			</span>
		
		</button>	
	</div>
</form>
