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

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

{% block body %}
    <div class="login-back">
        <div class="login-container">
            <h1 class="login-heading">CONNECTEZ VOUS</h1>

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

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

                <div class="login-form-group">
                    <label for="username">Email</label>
                    <input type="email" value="{{ last_username }}" name="_username" id="username" class="login-input" autocomplete="email" required autofocus>
                </div>
                <div class="login-form-group">
                    <label for="password">Mot de passe</label>
                    <input type="password" name="_password" id="password" class="login-input" autocomplete="current-password" required>
                </div>

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

                <button class="login-btn" type="submit">SE CONNECTER</button>
            </form>
        </div>
    </div>
    <style>
        .login-back {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            background-color: #282828;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .login-container {
            background-color: #676E5F;
            padding: 20px;
            border-radius: 5px;
            color: #CBBEB7;
            width: 50vw;
            max-width: 600px;
        }

        .login-heading {
            margin-bottom: 20px;
            font-size: 2.5em;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .login-form-group {
            margin-bottom: 20px;
            width: 30vw;
            text-align: left;
        }

        .login-input {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #CBBEB7;
            background-color: #CBBEB7;
            color: #282828;
        }

        .login-alert {
            background-color: #ff4c4c;
            color: #ffffff;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .login-logged-in {
            margin-bottom: 20px;
        }

        .login-btn {
            padding: 10px 20px;
            font-size: 1.2em;
            background-color: #282828;
            color: #CBBEB7;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .login-btn:hover {
            background-color: #CBBEB7;
            color: #282828;
        }
    </style>
{% endblock %}