<!DOCTYPE html>
<html>
<head>
	<!-- Standard Meta -->
	<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.0, maximum-scale=1.0">

	<!-- Site Properities -->
	<title>AtEar</title>

	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/semantic.css') }}">
	<script src="{{ url_for('static', filename='js/libs/jquery.js') }}"></script>
	<script src="{{ url_for('static', filename='js/libs/semantic.js') }}"></script>

<style>
	body {
		background-color:#DADADA;
	}
	body > .grid{
		height:100%;
	}
	.image {
		margin-top:-100px;
	}
	.column{
		max-width:450px;
	}
</style>
<script>
$(document)
	.ready(function() {
		$('.ui.form').form({
			fields:{
				username: {
					identifier : 'username',
					rules : [{
						type : 'empty',
						prompt : 'Please enter your name'
					}]
				},
				password: {
					identifier : 'password',
					rules : [{
						type : 'empty',
						prompt : 'Please enter password'
					}]
				}
			}
		});
	})
;
</script>
</head>

<body>

<div class="ui middle aligned center aligned grid">
	<div class="column">
		<img class="ui image" src="{{ url_for('static', filename='img/atear_logo_d.svg') }}" alt="">
		<form action="{{ url_for('login') }}" method="POST" class="ui large form">
			<div class="ui stacked segment">
				<div class="field">
					<div class="ui left icon input">
						<i class="user icon"></i>
						<input type="text" name="username" value="{{ request.form.username }}" placeholder="username">
					</div>
				</div>
				<div class="field">
					<div class="ui left icon input">
						<i class="lock icon"></i>
						<input type="password" name="password" placeholder="password">
					</div>
				</div>
				<div class="ui fluid large teal submit button">Login</div>
			</div>
		</form>
		{% if error %}
		<div class="ui error icon message">
			<i class="warning sign icon"></i>
			<div class="content">
				<div class="header">LOGIN ERROR</div>
				<p>{{ error }}</p>
			</div>
		</div>
		{% endif %}
	</div>
</div>

</body>

</html>