<!DOCTYPE html>
<html>

<head>
	<title>Enduro login form</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="/admin/assets/css/main.css">
	<link rel="stylesheet" href="/_prebuilt/_settings.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,800" rel="stylesheet">

	<script type="text/javascript">
		$(document).ready(function () {
			$('.login_form').submit(function (e) {

				// store login card for later use
				var login_card = $('.login-card')

				$.getJSON('/admin_api/trollhunter', $('.login_form').serialize(), function (res) {
					if (res.success) {
						// just reload if login successful
						location.reload()
					} else {

						// add failed and wiggle classes
						login_card.addClass('login-failed wiggle')

						// listen to wiggle animation change and remove wiggle class so it can be added again
						login_card.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
							login_card.removeClass('wiggle')
						})

					}
				})

				e.preventDefault()
			})
		})
	</script>

</head>

<body>

	<div class="full-background"></div>
	<div class="card login-card">
		<div class="login-logo">
			{{>enduro_logo}}
		</div>
		<div class="card-body">

			<div>
				<h2>Access restricted</h2>
				<div class="wedge-2x"></div>
			</div>

			<form class="login_form" action="http://google.com" method="GET">
				<div class="form-row">
					<label class="login-textfield-label">
						<input id="pswrdinput" class="passphrase_input" type="password" name="pswrd" placeholder="passphrase"
							autocomplete=off>
						<span>Passphrase</span>
					</label>
				</div>
				<div class="form-row">
					<div class="wedge-2x"></div>
					<button class="btn passphrase_button" type="submit">Submit</button>
				</div>
				<div class="clearfix"></div>
			</form>
		</div>
	</div>

</body>

</html>