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

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

{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" href="{{ asset('css/registration.css') }}">
    <style>
        .mb-3 a {
            color:#00b894;
            font-weight: bold;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #333;
            font-weight: 500;
        }
        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.2s;
        }
        .form-group input:focus {
            outline: none;
            border-color: #00b894;
        }
        .form-check {
            margin: 1.5rem 0;
            display: flex;
            align-items: center;
        }
        .form-check-input {
            margin-right: 0.5rem;
        }
        .form-check-label {
            color: #333;
        }
        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 0.75rem 1.25rem;
            border-radius: 4px;
            margin-bottom: 1.5rem;
        }
        .btn-register {
            width: 100%;
            padding: 0.75rem;
            background-color: #00b894;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .btn-register:hover {
            background-color: #00a884;
        }
        .registration-link {
            color: #00b894;
            text-decoration: none;
            font-weight: 500;
        }
        .registration-link:hover {
            text-decoration: underline;
        }
    </style>
{% endblock %}

{% block body %}
	<div class="registration-container">
		<div class="registration-card">
			<div class="card-body">
				<h1 class="registration-title">Connexion</h1>

				{{ form_start(loginForm, {'attr': {'class': 'registration-form'}}) }}
					{% if error %}
						<div class="alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                        <br>
                        <br>
                        <br>
					{% endif %}

					<div class="form-group">
						{{ form_label(loginForm.email) }}
						{{ form_widget(loginForm.email, {'attr': {'class': 'form-control'}}) }}
					</div>

					<div class="form-group">
						{{ form_label(loginForm.password) }}
						{{ form_widget(loginForm.password, {'attr': {'class': 'form-control'}}) }}
					</div>

					<div class="form-check">
						{{ form_widget(loginForm._remember_me, {'attr': {'class': 'form-check-input'}}) }}
						{{ form_label(loginForm._remember_me, null, {'label_attr': {'class': 'form-check-label'}}) }}
					</div>

					<button class="btn-register" type="submit">Se connecter</button>
					<br>
                    {% if app.user %}
					<div class="mb-3">
						Vous etes connecté en tant que
						<strong>{{ app.user.userIdentifier }}</strong>,
						<a href="{{ path('app_logout') }}" class="registration-link">Déconnexion</a>
					</div>
                    {% else %}
                         <div class="text-center" style="margin-top: 1.5rem;">
						<p>Pas encore inscrit ? <a href="{{ path('app_register') }}" class="registration-link">Inscrivez-vous ici</a></p>
					</div>
				{% endif %}
				{{ form_end(loginForm) }}
			</div>
		</div>
	</div>
{% endblock %}