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

{% block header %}{% endblock %}
{% block sidebar %}{% endblock %}

{% block main %}
	<section class="flex h-screen">
		<div class="relative m-auto">
			<div class="bg-linear-to-r from-zpb-yellow to-zpb-blue absolute inset-0 rounded-xl rotate-[-6deg] "></div>
			<div class="opacity-80 relative w-full m-auto max-w-md p-4 rounded-xl shadow-sm sm:p-6 md:p-8 bg-zpb-beige">
				<form class="space-y-6" method="post">

					{% if app.user %}
						<div class="text-red-500 flex">
							&#x26A0 Déjà connecté en tant que
							{{ app.user.userIdentifier }}
							<a href="{{path('app_logout')}}">
								{{ ux_icon('gravity-ui:circle-xmark-fill', {class: "w-6 h-6"}) }}
							</a>
						</div>
					{% endif %}

					<h5 class="text-lg font-medium text-black">Bienvenue, veuillez vous connecter !</h5>

					<div class="relative">
						<div class="absolute inset-y-0 start-0 flex items-center pl-3 pointer-events-none">
							{{ ux_icon('fa:at') }}
						</div>
						<input autocomplete="email" id="inputEmail" name="email" type="email" value="{{ last_username }}" placeholder="E-mail" class="form-login" required>
					</div>

					<div class="relative">
						<div class="absolute inset-y-0 start-0 flex items-center pl-3 pointer-events-none">
							{{ ux_icon('fa6-solid:key') }}
						</div>
						<input autocomplete="current-password" id="inputPassword" name="password" type="password" placeholder="Mot de passe" class="form-login" required>
					</div>

					<div class="flex justify-center">
						<button type="submit" class="btn-appli btn-zpb">Connexion</button>
					</div>

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

				</form>
			</div>
		</div>

	</section>
{% endblock %}