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

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

{% block body %}
    <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
         data-sidebar-position="fixed" data-header-position="fixed">
        <div class="position-relative overflow-hidden radial-gradient min-vh-100 d-flex align-items-center justify-content-center">
            <div class="d-flex align-items-center justify-content-center w-100">
                <div class="row justify-content-center w-100">
                    <div class="col-md-8 col-lg-6 col-xxl-3">
                        <div class="card mb-0">
                            <div class="card-body">
                                <a href="{{ path('acceuilConsulter') }}" class="text-nowrap logo-img text-center d-block py-3 w-100">
                                    <sup>23</sup>JELMUSIC
                                </a>
                                <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.userIdentifier }}, <a href="{{ path('deconnexion') }}">Logout</a>
                                        </div>
                                    {% endif %}
                                    <div class="mb-3">
                                        <label for="inputEmail" class="form-label">Email</label>
                                        <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control" autocomplete="email" required autofocus>
                                    </div>
                                    <div class="mb-4">
                                        <label for="inputPassword" class="form-label">Mot de passe</label>
                                        <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>
                                    </div>
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                                    <button class="btn btn-primary w-100 py-8 fs-4 mb-4 rounded-2" type="submit">S'authentifier</button>
                                    <div class="d-flex align-items-center justify-content-center">
                                        <p class="fs-4 mb-0 fw-bold">Pas de compte ?</p>
                                        <a class="text-primary fw-bold ms-2" href="{{ path('inscription') }}">Créer un compte</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../public/design/assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="../../public/design/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}