{% extends "base.html.twig" %}

{% block title %}
	{{ parent() }}
	Accueil
{% endblock %}

{% block content %}
	<!DOCTYPE html>
	<html lang="fr">
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Page de Connexion</title>
			<style>

				body {
					font-family: Arial, sans-serif;
					text-align: center;
					padding: 50px;
				}

				.login-box {
					max-width: 400px;
					margin: auto;
					background-color: #fff;
					padding: 30px;
					border-radius: 10px;
					box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				}
				.form-group {
					margin-top: 20px;
					margin-bottom: 20px;
					text-align: left;
				}
				.form-group label {
					display: block;
					font-weight: bold;
					margin-bottom: 5px;
				}
				.form-group input {
					width: 100%;
					padding: 8px;
					border: 1px solid #ccc;
					border-radius: 4px;
				}
				.form-group button {
					padding: 10px 20px;
					background-color: #007bff;
					border: none;
					color: #fff;
					border-radius: 4px;
					cursor: pointer;
				}
				img {
					margin-top: 10%;
					margin-left: 0;
					width: 85%;
				}
				p {
					margin-left: 10px;
					font-size: 12px;
					text-align: left;
				}
				a {
					text-decoration: none;
					color: #007bff;
				}
			</style>
		</head>
		<body>
			<div class="login-box">
				<h2>Connexion</h2>
				<form action="" method="post">
					<div class="form-group">
						<label for="mail">Adresse mail :</label>
						<input type="email" id="mail" name="mail" required placeholder="mail">
					</div>
					<div class="form-group">
						<label for="mot_de_passe">Mot de passe :</label>
						<input type="password" id="mot_de_passe" name="mot_de_passe" required placeholder="Mot de Passe">
					</div>
					<p>Vous n'avez pas de compte ?
						<a href="index.php?page=inscription">
							Inscrivez-vous
						</a>
					</p>
					<div class="form-group">
						<button type="submit" class="btn btn-primary">Se connecter</button>
					</div>
				</div>
			</body>
		</body>
	</html>

{% endblock %}
