<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css" />
        <title>Beyond School</title>
    </head>
    <body>
        <div id="container">
            <form method="post">
                <h2>Connection</h2>
                <label><b>Email :</b></label>
                <input type="email" name="email" placeholder="Insérez votre email" required>
                <br>
                <label><b>Mot de passe :</b></label>
                <input type="password" name="password" placeholder="Insérez votre mot de passe" required>
                <br>
				<a href="/forgot">
					<h6>oublié ?</h6>
				</a>
				{% if error %}
				<p>{{error}}</p>
				{% endif %}
                <input type="submit" value="Connexion">
				<a href="/signin">
					<input type="button" value="Inscription">
            	</a>
			</form>
        </div>
        <style>
            body{
                background: #67BE4B;
            }
            #container{
                width:400px;
                margin:0 auto;
                margin-top:10%;
            }
            /* Bordered form */
            form {
                width:100%;
                padding: 40px;
                border: 1px solid #f1f1f1;
                background: #fff;
                box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
            }
            #container h2{
                width: 38%;
                margin: 0 auto;
                padding-bottom: 10px;
                text-align: center;
            }

            /* Full-width inputs */
            input[type=email], input[type=password], input[type=number] {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid #ccc;
                box-sizing: border-box;
            }

            /* Set a style for all buttons */
			input[type=submit], input[type=button] {
                background-color: #53af57;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                border: none;
                cursor: pointer;
                width: 100%;
            }
            input[type=submit]:hover {
                background-color: white;
                color: #53af57;
                border: 1px solid #53af57;
            }
			h6 {
				float: right;
			}
			p {
				color: red;
			}
        </style>
    </body>
</html>
