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

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

{% block body %}
	{{parent()}}
	<form method="post">
		{% if error %}
			<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
		{% endif %}

		{% if app.user %}
			<div class="mb-3">
				You are logged in as
				{{ app.user.userIdentifier }},
				<a href="{{ path('app_logout') }}">Logout</a>
			</div>
		{% endif %}

		<div class="container-fluid">
			<div class="row" style="min-height: 100vh;">
				<!-- Left side: Login form -->
				<div class="col-lg-6 bg-white d-flex align-items-center justify-content-center">
					<div class="login-form-container" style="max-width: 450px; width: 100%; padding: 40px;">
						<h2 class="mb-4 text-center" style="color: #504B8E; font-weight: 700;">Bon retour parmi nous!</h2>
						<h5 class="text-muted mb-5 text-center">Veuillez vous connecter pour continuer</h5>
						
						<div class="form-group mb-4">
							<label for="username" class="form-label">Email</label>
							<input type="email" value="{{ last_username }}" name="_username" class="form-control form-control-lg" id="username" placeholder="Votre email..." autocomplete="email" required autofocus style="border-radius: 10px; padding: 12px 15px;">
						</div>
						
						<div class="form-group mb-5">
							<label for="password" class="form-label">Mot de passe</label>
							<input type="password" name="_password" id="password" class="form-control form-control-lg" placeholder="Votre mot de passe..." autocomplete="current-password" required style="border-radius: 10px; padding: 12px 15px;">
						</div>
						
						<button class="btn btn-block btn-lg w-100 font-weight-medium auth-form-btn" style="background-color: #504B8E; border-color: #504B8E; color: white; border-radius: 10px; padding: 12px 15px; margin-bottom: 20px;" type="submit">
							Connexion
						</button>
						
						<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
					</div>
				</div>
				
				<!-- Right side: Logo and background -->
				<div class="col-lg-6 d-flex align-items-center justify-content-center" style="background-color: #F5F7FF;">
					<div class="text-center">
						<img src="{{ asset('styles/images/logo.svg') }}" alt="Janaza Logo" style="max-width: 80%; height: auto;">
						<div class="mt-4" style="color: #504B8E; font-size: 18px;">
							La plateforme dédiée aux services funéraires
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
{% endblock %}