{{define "login"}}
<!DOCTYPE html>
<html>
	<head>
		<title>Login</title>

		{{template "head"}}
	
		<script> 
			$(document).ready(function() { 
				$('#invalidCredentials').hide(); 
				$('#loginForm').ajaxForm({
					success:    function() {
						window.location.href = "/dashboard";
					},
					error: function() {
						$('#invalidCredentials').show();
					}
				}); 
			}); 
		</script> 
	</head>
	<body>
		<div class="container" id="head">
			Budgeteer
		</div>
		<div class="container col-lg-12" id="content">
			<form id="loginForm" action="/api/v1/user/login" method="POST" class="center-block">
				<div class="form-group">
					<label for="username">User</label>
					<input type="text" name="username" class="form-control" placeholder="User" />
				</div>

				<div class="form-group">
					<label for="password">Password</label>
					<input type="password" name="password" class="form-control" placeholder="Password" />
					<p id="invalidCredentials">
						The entered credentials are invalid
					</p>
				</div>

				<input type="submit" value="Login" class="btn btn-default" />
			</form>
		</div>
	</body>
</html>
{{end}}
