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

{% block title %}Log in!
{% endblock %}

{% block body %}
	<div class="flex items-center justify-center h-screen bg-neutral-200 dark:bg-neutral-500">
		<div class="w-full max-w-sm mx-auto bg-neutral-primary-soft p-6 border border-default rounded-base shadow-xs">
			<form class="max-w-sm mx-auto" method="post">
				{% if error %}
					<div class="p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft" role="alert">
						{{ error.messageKey|trans(error.messageData, 'security') }}
					</div>
				{% endif %}

				{% if app.user %}
					<div class="p-4 mb-4 text-sm text-fg-warning rounded-base bg-warning-soft" role="alert">
						Vous êtes déjà connecté en tant que
						{{ app.user.userIdentifier }},
						<a href="{{ path('app_logout') }}" class="underline">Se déconnecter</a>
					</div>
				{% endif %}

				<div class="mb-5">
					<label for="email" class="block mb-2.5 text-sm font-medium text-heading">Votre mail</label>
					<input type="email" value="{{ last_username }}" name="_username" id="username" autocomplete="email" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="name@flowbite.com" required/>
				</div>

				<div class="mb-5">
					<label for="password" class="block mb-2.5 text-sm font-medium text-heading">Votre mot de passe</label>
					<input type="password" name="_password" id="password" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="••••••••" autocomplete="current-password" required/>
				</div>

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

				<label for="_remember_me" class="flex items-center mb-5">
					<input id="_remember_me" name="_remember_me" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"/>
					<p class="ms-2 text-sm font-medium text-heading select-none">Se souvenir de moi</p>
				</label>

				<button type="submit" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Se connecter</button>
			</form>
		</div>
	</div>
{% endblock %}