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

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

{% block stylesheets %}
    {{ parent() }}
    <style>
        .divider:after,
        .divider:before {
            content: "";
            flex: 1;
            height: 1px;
            background: #eee;
        }
        .h-custom {
            height: calc(100% - 73px);
        }
        @media (max-width: 450px) {
            .h-custom {
                height: 100%;
            }
        }
    </style>
{% endblock %}


{% block body %}


    <section class="vh-100">
        <div class="container-fluid h-custom">
            <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-md-9 col-lg-6 col-xl-5">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
                         class="img-fluid" alt="Sample image">
                </div>
                <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
                    <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.username }}, <a href="{{ path('app_logout') }}">Logout</a>
                            </div>
                        {% endif %}

                        <!-- Email input -->
                        <div class="form-outline mb-4">
                            <input type="email" value="{{ last_username }}"
                                   name="email" id="inputEmail" class="form-control form-control-lg" autocomplete="email" required autofocus>
                            <label class="form-label" for="form3Example3">Adresse e-mail</label>
                        </div>

                        <!-- Password input -->
                        <div class="form-outline mb-3">
                            <input type="password" name="password" id="inputPassword" class="form-control form-control-lg" autocomplete="current-password" required>


                            <label class="form-label" for="form3Example4">Mot de passe</label>
                        </div>

                        <div class="text-center text-lg-start mt-4 pt-2">
                            <button class="btn btn-primary btn-lg"
                                    style="padding-left: 2.5rem; padding-right: 2.5rem;">Connexion</button>
                        </div>
                        <input type="hidden" name="_csrf_token"
                               value="{{ csrf_token('authenticate') }}"
                        >
                    </form>
                </div>
            </div>
        </div>
        <div
                class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary">
            <!-- Copyright -->
            <div class="text-white mb-3 mb-md-0">
                Copyright © {{ 'now' | date('Y') }}. Tous droits réservés.
            </div>
            <!-- Copyright -->

        </div>
    </section>

{% endblock %}