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

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

{% block body %}

    <div class="container">

        <!-- Outer Row -->
        <div class="row justify-content-center">

            <div class="col-xl-10 col-lg-12 col-md-9">

                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <!-- Nested Row within Card Body -->
                        <div class="row">
                            <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
                            <div class="col-lg-6">
                                <div class="p-5">
                                    <div class="text-center">
                                        <h1 class="h4 text-gray-900 mb-4">Bonjour !</h1>
                                    </div>
                                    <form class="user" method="post">
                                        {% if error %}
                                            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                                        {% endif %}

                                        {% if app.user %}
                                            <div class="mb-3">
                                                Tu es déjà connecter avec {{ app.user.userIdentifier }}, <a href="{{ path('logout') }}">Déconnexion</a>
                                            </div>
                                        {% endif %}

                                        <h1 class="h3 mb-3 font-weight-normal">Connectez-vous</h1>
                                        <label for="inputEmail">Email</label>
                                        <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control" autocomplete="email" required autofocus>
                                        <label for="inputPassword">Password</label>
                                        <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>

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

                                        <button class="btn btn-lg btn-primary" type="submit">
                                            Connexion
                                        </button>
                                        {#                                        <hr>#}
                                        {#                                        <a href="index.html" class="btn btn-google btn-user btn-block">#}
                                        {#                                            <i class="fab fa-google fa-fw"></i> Login with Google#}
                                        {#                                        </a>#}
                                        {#                                        <a href="index.html" class="btn btn-facebook btn-user btn-block">#}
                                        {#                                            <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook#}
                                        {#                                        </a>#}
                                    </form>
                                    <hr>
                                    <div class="text-center">
                                        {#                                        <a class="small" href="forgot-password.html">Forgot Password?</a>#}
                                    </div>
                                    <div class="text-center">
                                        <a class="small" href="{{ path("register") }}">Vous n'avez pas de compte. Créés en un !</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

{% endblock %}