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

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

{% block body %}
	<div class="flex min-h-screen items-center justify-center bg-gray-100">
		<div class="w-full max-w-md bg-white p-6 rounded-lg shadow-md">
			{% if error %}
				<div class="mb-4 text-sm text-red-600 bg-red-100 p-3 rounded">
					{{ error.messageKey|trans(error.messageData, 'security') }}
				</div>
			{% endif %}

			{% if app.user %}
				<div class="mb-4 text-gray-700">
					Vous êtes connecté en tant que
					<strong>{{ app.user.userIdentifier }}</strong>.
					<a href="{{ path('app_logout') }}" class="text-blue-500 hover:underline">Se déconnecter</a>
				</div>
			{% endif %}

			<h1 class="text-xl font-semibold text-gray-700 mb-4 text-center">Connexion</h1>

			<form method="post" class="space-y-4">
				<div>
					<label for="username" class="block text-sm font-medium text-gray-700">Email</label>
					<input type="email" value="{{ last_username }}" name="_username" id="username" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" autocomplete="email" placeholder="Adresse e-mail" required autofocus>
				</div>

				<div>
					<label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
					<input type="password" name="_password" id="password" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" autocomplete="current-password" placeholder="Mot de passe" required>
				</div>

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

				<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition cursor-pointer">
					Se connecter
				</button>
			</form>
		</div>
	</div>
{% endblock %}