{% extends 'templates/base.html' %}
{% block title %}{{super()}} | Login{% endblock %}

{% block head %}
{{super()}}
	<link rel="stylesheet" type="text/css" href="/static/css/.form.min.css">
	<link rel="stylesheet" type="text/css" href="/static/css/.login.min.css">
{% endblock %}

{% block javascript %}
{{super()}}
	<script type="application/javascript" src="/static/js/.login.min.js"></script>
{% endblock %}

{% block main %}

	<section class='container'>
		
		<h1>Welcome!</h1>
	
		<div class='flex'>
			
			<div id='login'>
	
				<h3>Login</h3>
				<form method="post">
					<input type="hidden" name="_csrf" value="{{csrfToken}}">
					
					<div id='social-login' class='flex form-group'>
						
						<a href="/login/google" class='gp btn'>
							<i class="fa fa-google-plus"></i>
							<span class='text'>Login with Google</span>
						</a>
						
						<a href="/login/facebook" class='fb btn'>
							<i class="fa fa-facebook"></i>
							<span class='text'>Login with Facebook</span>
						</a>
						
						<a href="/login/twitter" class='tw btn'>
							<i class="fa fa-twitter"></i>
							<span class='text'>Login with Twitter</span>
						</a>
						
					</div>
					
					<div class='form-group' style="flex-wrap:wrap">
						<input type="email" name="email" placeholder="Email" maxlength="160" required>
						<div id='password-group' class='input-with-addon-group'>
							<input id='password' type="password" class='input-with-addon right' placeholder="Password" name="password" maxlength="160" required>
							<input id='show' type="text" class='right input-addon yellow' size="4" value="SHOW" readonly>
						</div>
					</div>
					
					<input type="submit" value="Sign in" class='btn main'>
					
					<p style="margin-bottom:0"><a href="/login/forgot">Forgot your password?</a></p>
				</form>
			</div>
			
			<hr style="display:none">
			
			<div id='signup'>
				<h3>Create account</h3>
				<p>Welcome aboard!  </p>
				<form action="/signup" method="post">
					<input type="hidden" name="_csrf" value="{{csrfToken}}">
					<input type="email" name="email" placeholder="Your email" required>
					<p>You will be sent an email confrimation with a link to create a password. </p>
					<p>By signing up, you agree to our <a href="/terms">terms of service</a> and <a href="/privacy">privacy policy</a>. </p>
					<input type="submit" value="Sign up" class='btn'>
				</form>
			</div>
			
		</div>
		
	</section>
	
{% endblock %}