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

{% block title %}Page de connexion
{% endblock %}

{% block body %}

	<style>
        body {
            overflow-y: hidden;
    }

    </style>
	<div class="auth-wrapper d-flex no-block justify-content-center align-items-center" style="background:url(../../assets/images/background/login-register.jpg) no-repeat center center;">
		<div class="auth-box on-sidebar">
			<div id="loginform">
				<div class="logo">
					<span class="db"><img src="../../assets/images/logo.png" alt="logo" width="20%"/></span>
					<h5 class="font-medium m-b-20">Espace reservé</h5>
				</div>
				<!-- Form -->
				<div class="row">
					<div class="col-12">
						<form class="form-horizontal m-t-20" method="post">
							{% if hasError %}
								<div class="alert alert-danger">Une erreur est survenue, le nom d'utilisateur ou le mot de pass est incorrecte</div>
							{% endif %}

							<div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">
										<i class="ti-email"></i>
									</span>
								</div>
								<input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control form-control-lg" placeholder="Votre email" autocomplete="email" required autofocus>
							</div>
							<div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon2">
										<i class="ti-key"></i>
									</span>
								</div>
								<input type="password" name="password" id="inputPassword" class="form-control form-control-lg" placeholder="Votre mot de passe" autocomplete="current-password" required>

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

							<div class="form-group text-center">
								<div class="col-xs-12 p-b-20">
									<button class="btn btn-block btn-lg btn-info" type="submit">Connexion</button>
								</div>
							</div>
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
									<div class="social">
										<a href="javascript:void(0)" class="btn  btn-facebook" data-toggle="tooltip" title="" data-original-title="Login with Facebook">
											<i aria-hidden="true" class="fab  fa-facebook"></i>
										</a>
										<a href="javascript:void(0)" class="btn btn-googleplus" data-toggle="tooltip" title="" data-original-title="Login with Google">
											<i aria-hidden="true" class="fab  fa-google-plus"></i>
										</a>
									</div>
								</div>
							</div>
							
						</form>
					</div>
				</div>
			</div>
			<div id="recoverform">
				<div class="logo">
					<span class="db"><img src="../../assets/images/logo-icon.png" alt="logo"/></span>
					<h5 class="font-medium m-b-20">Recover Password</h5>
					<span>Enter your Email and instructions will be sent to you!</span>
				</div>
				<div
					class="row m-t-20">
					<!-- Form -->
					<form
						class="col-12" action="index.html">
						<!-- email -->
						<div class="form-group row">
							<div class="col-12">
								<input class="form-control form-control-lg" type="email" required="" placeholder="Username">
							</div>
						</div>
						<!-- pwd -->
						<div class="row m-t-20">
							<div class="col-12">
								<button class="btn btn-block btn-lg btn-danger" type="submit" name="action">Reset</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	{% endblock %}