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

{% block title %}Inscription{% 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" style="box-shadow: lightgrey 1px 1px 10px 1px">
                            <div class="card-body">
                                <a href="{{ path('acceuilConsulter') }}" class="text-nowrap logo-img text-center d-block py-3 w-100"></a>
                                <a href="{{ path('acceuilConsulter') }}" class="text-nowrap logo-img text-center d-block py-3 w-100">
                                    <sup>23</sup>JELMUSIC
                                </a>
                                {{ form_errors(registrationForm) }}

                                {{ form_start(registrationForm) }}
                                    {{ form_row(registrationForm.email) }}
                                    {{ form_row(registrationForm.plainPassword, {
                                        label: 'Mot de passe'
                                    }) }}

                                <button type="submit" class="btn btn-primary w-100 py-8 fs-4 mb-4 rounded-2">Créer un compte</button>
                                <div class="d-flex align-items-center justify-content-center">
                                    <p class="fs-4 mb-0 fw-bold">Déjà un compte ?</p>
                                    <a class="text-primary fw-bold ms-2" href="{{ path('connexion') }}">Se connecter</a>
                                </div>
                            </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>
    {{ form_end(registrationForm) }}
{% endblock %}