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

{% block stylesheets %}
	<link rel="shortcut icon" href="../assets/images/fav.png" type="image/x-icon">

	<link rel="shortcut icon" href="../assets/images/fav.jpg">

	<link rel="stylesheet" href="../assets/css/bootstrap.min.css">


	<style>
		* {
			box-sizing: border-box;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			background-color: #fff;
		}
		Body {
			overflow-x: hidden;
		}
		.login-box-text {
			text-align: center;
		}
		.login-box-text p {
			margin-top: -8%;

			font-size: 18px;
		}
		.login-box h5 {
			position: relative;
			font-size: 24px;
			margin-bottom: 10%;
			z-index: 10px;
			font-family: 'M PLUS Rounded 1c', sans-serif;
		}

		#regForm {
			background-color: #fff;
			margin-top: 33px;
			margin-left: 8%;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			padding: 40px;
			width: 35%;
			min-width: 300px;
		}

		h1 {
			text-align: center;
		}

		input {
			padding: 10px;
			width: 100%;
			font-size: 17px;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			border: 1px solid #aaaaaa;
			margin-bottom: 3%;
			border-radius: 3px;
		}
		input.invalid {
			background-color: #ffdddd;
		}


		.no-margin button {
			background-color: #5672f9;
			color: #ffffff;
			border: none;
			font-size: 17px;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			cursor: pointer;
			border-radius: 8px;
			text-align: center;
			width: 100%;
			height: 50px;
			margin-bottom: 8%;

		}

		.no-margin button:hover {
			opacity: 0.9;
			background-color: #5672f9;
		}


		.session-title {
			padding: 30px;
			margin: 0;
			font-family: "Bona Nova", serif;
		}
		.session-title h2 {
			width: 100%;
			text-align: center;
			font-size: 1.8rem;
		}
		.session-title p {
			width: 100%;
			text-align: center;
			font-size: 0.9rem;
		}

		.form-container .login-container {
			box-shadow: 0 2px 6px 0 rgba(218, 218, 253, 0.65), 0 2px 6px 0 rgba(206, 206, 238, 0.54);
			margin-top: 5%;
		}
		.form-container .login-container .content-part {
			background-color: #f7f9fe;
			border-top-left-radius: 8px;
			border-bottom-left-radius: 8px;
			padding: 50px;
		}
		.form-container .login-container .content-part img {
			max-width: 100%;
		}
		.form-container .login-container .content-part h2 {
			font-size: 1.7rem;
			text-align: center;
			margin-bottom: 20px;
		}
		.form-container .login-container .content-part p {
			font-size: 0.9rem;
			text-align: center;
		}
		.form-container .login-container .form-part {
			background-color: #FFF;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			padding: 50px;
		}
		.form-container .login-container .form-part .signinlink {
			text-align: right;
			margin-top: -20px;
		}
		.form-container .login-container .form-part .signinlink a {
			font-weight: 600;
		}
		.form-container .login-container .form-part .formcol {
			margin: auto;
		}
		.form-container .login-container .form-part .formcol h3 {
			text-align: center;
			margin-top: 30px;
			margin-bottom: 30px;
			font-size: 1.5rem;
		}
		.form-container .login-container .form-part .login {
			margin: 110px auto auto;
		}
		.form-container .login-container .form-part .form-floating .btn {
			width: 100%;
			margin-top: 15px;
		}
		.form-container .login-container .form-part .form-floating .form-control {
			background-color: #cccccc24;
		}
		.form-container .login-container .form-part .form-floating .form-control:hover {
			border: none;
			box-shadow: 0 2px 6px 0 rgba(218, 218, 253, 0.65), 0 2px 6px 0 rgba(206, 206, 238, 0.54);

		}
		.form-container .login-container .form-part .form-floating .form-control:focus {
			border: 2px solid #0d6efd;
			box-shadow: 0 2px 6px 0 rgba(218, 218, 253, 0.65), 0 2px 6px 0 rgba(206, 206, 238, 0.54);

		}
		.form-container .login-container .form-part .form-floating .form-control:active {
			border: 2px solid #0d6efd;
			box-shadow: 0 2px 6px 0 rgba(218, 218, 253, 0.65), 0 2px 6px 0 rgba(206, 206, 238, 0.54);

		}

		.container-fluid {
			margin-top: 5%;
		}
		.vgh {
			top: 10%;
			text-decoration: none;
			color: #000;
		}

		.vgh:hover {
			color: #5672f9;
		}
		.img-box img {
			width: 130%;
			margin-top: -3%;
			height: auto;
			margin-left: -9%;
		}
		.linkup a {
			color: #5a38fd;
			text-decoration: none;
		}
		.form-log {
			margin-top: 10%;
		}
		.link-out {
			text-decoration: none;
		}
		.mb-15 {
			margin-bottom: 15px;
		}
	</style>
{% endblock %}

{% block title %}Connexion
{% endblock %}

{% block body %}


	<div class="container-fluid">
		<div class="container">
			<div class="col-xl-10 col-lg-11 mx-auto login-container">
				<div class="row">

					<div class="col-lg-5 col-md-6 no-padding">
						<div class="login-box">
							<div class="login-box-text">
								<h5>Content de vous revoir !</h5>
								<p>Se connecter à Maman Julienne</p>
							</div>
							<div class="mb-15">
								{% if error %}
									<div class="alert alert-danger">E-mail ou mot de passe incorrect</div>
								{% endif %}
							</div>
							{% if app.user %}
								<div class="mb-3 text-center mt-5">
									Vous êtes déjà connectés en tant que
									<br/>"{{ app.user.firstname|capitalize }}
									{{ app.user.name|capitalize }}"

									<br/>
									<a class="link-out" href="{{ path('app_logout') }}">Changer de compte ?</a>
								</div>
							{% endif %}
							<form autocomplete="off" method="post" class="form-log">

								<div class="login-row row no-margin">
									<label for="inputEmail">
										Adresse e-mail</label>
									<input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control form-control-sm" required autofocus>
								</div>

								<div class="login-row row no-margin">
									<label for="inputPassword">
										Mot de passe</label>
									<input type="password" name="password" id="inputPassword" class="form-control form-control-sm" style="margin-bottom:50px" required autofocus>
								</div>

								<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

								<div class="login-row row forrr no-margin">
									<p>
										<a class="vgh" href="{{ path('recovery_code_request') }}">
											Mot de passe oublié ?</a>
									</p>
								</div>

								<div class="login-row btnroo row no-margin">
									<button type="submit" class="btn btn-primary btn-sm">
										Se connecter</button>

								</div>
								<div class="login-row donroo row no-margin">
									<p class="linkup">Vous n'avez pas encore de compte ?
										<a href="{{ path('app_register') }}">S'inscrire</a>
									</p>
								</div>
							</form>
						</div>
					</div>

					<div class="col-lg-7 col-md-6 img-box">
						<img class="m-0" src="../../images/illustrations/design/alert_offer.svg" alt="login-image">
					</div>
				</div>
			</div>
		</div>
	</div>


{% endblock %}