{% extends 'templates/base.html' %}
{% block title %}{{ super() }} | Login{% endblock %}
{% block head %}
	{{super()}}
	<link rel="stylesheet" type="text/css" href="/static/css/form.css">
	<link rel="stylesheet" type="text/css" href="/static/css/login.css">
	<style>
		p, input, #social-login {
			margin-bottom: 5vh;
		}
	</style>
{% endblock %}

{% block main %}

	<section class='container'>
		
		<h1>Welcome!</h1>
	
		<div class='flex'>
			
			<div id='login'>
	
				<h3>Login</h3>
				<form method="post">
					
					<div id='social-login' class='flex form-group' style="justify-content:space-around">
						<a href="/login/google" class='gp btn'><i class="fa fa-google-plus"></i></a>
						<a href="/login/facebook" class='fb btn'><i class="fa fa-facebook"></i></a>
						<a href="/login/twitter" class='tw btn'><i class="fa fa-twitter"></i></a>
					</div>
					
					<div class='form-group' style="flex-wrap:wrap">
						<input type="email" placeholder="Email" name="email" required>
						<input type="password" placeholder="Password" name="password" required>
					</div>
					
					<input type="submit" value="Sign in" class='btn main'>
					
					<p><a href="/login/forgot">Forgot your password?</a></p>
				</form>
			</div>
			
			<hr class='hide'>
			
			<div id='signup'>
				<h3>Create account</h3>
				<p>Welcome aboard!  </p>
				<form action="/signup" method="POST">
					<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 %}