doctype html
html
	head
		include includes/_head.pug
		title Login - Vali Admin

	body
		section.material-half-bg
			.cover

		section.login-content
			.logo: h1 Vali

			.login-box
				form.login-form(action="index.html")
					h3.login-head
						i.fa.fa-lg.fa-fw.fa-user
						| SIGN IN
					.form-group
						label.control-label USERNAME
						input.form-control(type="text", placeholder="Email", autofocus)

					.form-group
						label.control-label PASSWORD
						input.form-control(type="password", placeholder="Password")

					.form-group
						.utility
							.animated-checkbox
								label
									input(type="checkbox")
									span.label-text Stay Signed in
							p.semibold-text.mb-2
								a(href="#" data-toggle="flip") Forgot Password ?

					.form-group.btn-container
						button.btn.btn-primary.btn-block
							i.fa.fa-sign-in.fa-lg.fa-fw
							| SIGN IN

				form.forget-form(action="index.html")
					h3.login-head
						i.fa.fa-lg.fa-fw.fa-lock
						| Forgot Password ?
					.form-group
						label.control-label EMAIL
						input.form-control(type="text", placeholder="Email")

					.form-group.btn-container
						button.btn.btn-primary.btn-block
							i.fa.fa-unlock.fa-lg.fa-fw
							| RESET

					.form-group.mt-3
						p.semibold-text.mb-0
							a(href="#" data-toggle="flip") <i class="fa fa-angle-left fa-fw"></i> Back to Login

		include includes/_javascript.pug

		script(type="text/javascript").
			// Login Page Flipbox control
			$('.login-content [data-toggle="flip"]').click(function() {
				$('.login-box').toggleClass('flipped');
				return false;
			});