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

{% block title %}{{ 'auth.login'|trans }} - {{ parent() }}{% endblock %}

{% block body %}
<div class="container-fluid vh-100">
    <div class="row h-100">
        <!-- Côté gauche avec image/branding -->
        <div class="col-md-6 d-none d-md-flex bg-primary bg-gradient text-white align-items-center justify-content-center">
            <div class="text-center">
                <i class="fas fa-chess-rook fa-5x mb-4 opacity-75"></i>
                <h1 class="display-4 fw-bold mb-3">{{ 'app.name'|trans }}</h1>
                <p class="lead">
                    {{ 'auth.platform_description'|trans }}
                </p>
                <div class="row text-center mt-5">
                    <div class="col">
                        <h5>2500+</h5>
                        <small>{{ 'home.stats.dealers'|trans }}</small>
                    </div>
                    <div class="col">
                        <h5>15,000+</h5>
                        <small>{{ 'home.stats.objects'|trans }}</small>
                    </div>
                    <div class="col">
                        <h5>18</h5>
                        <small>{{ 'auth.years_experience'|trans }}</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Côté droit avec formulaire -->
        <div class="col-md-6 d-flex align-items-center justify-content-center bg-light">
            <div class="w-100" style="max-width: 400px;">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-5">
                        <!-- Logo mobile -->
                        <div class="text-center d-md-none mb-4">
                            <i class="fas fa-chess-rook fa-3x text-primary mb-2"></i>
                            <h4 class="text-primary">{{ 'app.name'|trans }}</h4>
                        </div>

                        <h2 class="card-title text-center mb-4 fw-bold">{{ 'auth.login'|trans }}</h2>

                        {% if error %}
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                {{ error.messageKey|trans(error.messageData, 'security') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endif %}

                        {% for message in app.flashes('success') %}
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fas fa-check-circle me-2"></i>
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}

                        {% for message in app.flashes('error') %}
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}

                        <form method="post" id="login_form" class="needs-validation" novalidate>
                            <div class="mb-3">
                                <label for="inputEmail" class="form-label">
                                    <i class="fas fa-envelope me-1"></i>{{ 'auth.email'|trans }}
                                </label>
                                <input type="email" 
                                       value="{{ last_username }}" 
                                       name="_username" 
                                       id="inputEmail" 
                                       class="form-control form-control-lg" 
                                       autocomplete="username" 
                                       required 
                                       autofocus
                                       placeholder="{{ 'auth.email_placeholder'|trans }}">
                                <div class="invalid-feedback">
                                    Veuillez saisir une adresse email valide.
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="inputPassword" class="form-label">
                                    <i class="fas fa-lock me-1"></i>{{ 'auth.password'|trans }}
                                </label>
                                <input type="password" 
                                       name="_password" 
                                       id="inputPassword" 
                                       class="form-control form-control-lg" 
                                       autocomplete="current-password" 
                                       required
                                       placeholder="{{ 'auth.password_placeholder'|trans }}">
                                <div class="invalid-feedback">
                                    Le mot de passe est requis.
                                </div>
                            </div>

                            <div class="mb-3 form-check">
                                <input class="form-check-input" type="checkbox" name="_remember_me" id="remember_me">
                                <label class="form-check-label" for="remember_me">
                                    {{ 'auth.remember_me'|trans }}
                                </label>
                            </div>

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

                            <div class="d-grid gap-2">
                                <button class="btn btn-primary btn-lg" type="submit">
                                    <i class="fas fa-sign-in-alt me-2"></i>{{ 'auth.sign_in'|trans }}
                                </button>
                            </div>
                            
                            {% if recaptcha_enabled() %}
                                <div class="text-center mt-2">
                                    <small class="text-muted">
                                        <i class="fas fa-shield-alt me-1"></i>
                                        Protégé par reCAPTCHA - 
                                        <a href="https://policies.google.com/privacy" target="_blank" class="text-decoration-none">Confidentialité</a> et 
                                        <a href="https://policies.google.com/terms" target="_blank" class="text-decoration-none">Conditions</a>
                                    </small>
                                </div>
                            {% endif %}
                        </form>

                        <hr class="my-4">

                        <div class="text-center">
                            <p class="mb-2">
                                <a href="{{ path('app_forgot_password') }}" class="text-decoration-none">
                                    <i class="fas fa-key me-1"></i>{{ 'auth.forgot_password'|trans }}
                                </a>
                            </p>
                            <p class="mb-0">
                                {{ 'auth.not_member'|trans }}
                                <a href="{{ path('app_register') }}" class="text-decoration-none fw-bold">
                                    {{ 'auth.create_account'|trans }}
                                </a>
                            </p>
                        </div>

                        <div class="text-center mt-4 pt-3 border-top">
                            <small class="text-muted">
                                <a href="{{ path('app_home') }}" class="text-decoration-none">
                                    <i class="fas fa-arrow-left me-1"></i>{{ 'auth.back_to_home'|trans }}
                                </a>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.vh-100 {
    min-height: 100vh;
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.card {
    border-radius: 1rem;
}

.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    {{ recaptcha_script() }}
    {{ recaptcha_form_script('login', 'login_form') }}
{% endblock %}