{% extends "auth-layout.html" %}
{% set title = 'Login' %}
{% block content %}
<div class="cover" style="background-image: url(./img/bg.jpg);	background-repeat: no-repeat;position: relative">
	<div class="auth-container">
		<div class="auth-form-container">
			<div class="logo-jazi text-center"><h1 class="text-upper">Al Jazi</h1></div>
			<form action="" action="" class="auth-form common-shadow">
				<div class="form-row invalid">
					<label class="form-label text-upper clearfix" for="userName">Username</label>
					<input type="text" id="userName" class="form-input" placeholder="Enter your username">
					<p class="form-helper">Your User ID does not exist. please contact support</p>
				</div>

				<div class="form-row">
					<label class="form-label text-upper clearfix" for="formInputPassword">Password</label>
					<input type="password" id="formInputPassword" class="form-input" placeholder="Enter your password">
				</div>

				<div class="clearfix">
					<div class="fa-pull-left">
						<input class="form-input-checkbox" id="formInputRemember1" name="rememberMe" type="checkbox">
						<label for="formInputRemember1">Remember Me</label>
					</div>
					<div class="fa-pull-right">
						<label class="label-helper"><a href="forget-password.html">Forget password?</a></label>
					</div>
				</div>

				<div class="form-row form-submit">
					<button type="submit" class="button button-brand button-block text-upper">login</button>
					<button type="submit" class="button button-accent button-block text-upper">login as a guest</button>
				</div>
			</form>
		</div>
	</div>
	
	<div class="auth-footer">
		<div class="footer-content fa-pull-right">
			<h4>Powered by</h4>
			<a href="http://ordochao.com/" target="_blank"><img src="img/ordochao.png" alt=""></a>
		</div>
	</div>
</div>
{% endblock content %}