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

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

{% block content %}
	<form method="post" class="max-w-xs md:max-w-md mx-auto bg-stone-400 p-8 rounded-xl shadow-lg space-y-6 mt-8 md:mt-16">
		<div class="flex justify-center mb-4">
			<img src="{{ asset('images/my-horse.png') }}" alt="Logo" class="h-32 w-auto">
		</div>

		<h1 class="text-2xl font-semibold text-center text-stone-800">Connexion</h1>

		{% if error %}
			<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative text-sm" role="alert">
				{{ error.messageKey|trans(error.messageData, 'security') }}
				{% if error and 'désactivé' in error.message %}
					<br>
					<div class="text-right w-full">
						<a href="mailto:{{ admin_email }}" class="underline text-blue-500">
							Contacter l’administrateur
						</a>
					</div>
				{% endif %}
			</div>
		{% endif %}

		{% if app.user %}
			<div class="text-stone-700 text-sm text-center">
				Vous êtes connecté en tant que
				<span class="font-semibold">{{ app.user.userIdentifier }}</span>
				—
				<a href="{{ path('app_logout') }}" class="text-blue-600 hover:underline">Déconnexion</a>
			</div>
		{% endif %}

		<div>
			<label for="username" class="label-style">Email</label>
			<input type="email" value="{{ last_username }}" name="_username" id="username" placeholder="votre email" class="input-style w-full" autocomplete="email" required autofocus>
		</div>

		<div>
			<label for="password" class="label-style">Mot de passe</label>
			<input type="password" name="_password" id="password" placeholder="votre mot de passe" class="input-style w-full" autocomplete="current-password" required>
		</div>

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

		<div class="text-right">
			<a href="{{ path('app_forgot_password_request') }}" class="text-sm text-blue-600 hover:underline">
				Mot de passe oublié ?
			</a>
		</div>

		<div class="text-center">
			<button type="submit" class="w-full button-style button-nav-primary">
				Se connecter
			</button>
		</div>

		{# <hr class="my-4 border-stone-300">
										
												<div class="text-center text-sm">
													<p class="text-stone-700">
														Pas encore de compte ?
														<a href="#" class="text-blue-600 hover:underline font-medium">
															Créer un compte
														</a>
													</p>
												</div> #}
	</form>

{% endblock %}