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

{% block title %}Register{% endblock %}

{% block body %}
    <div class="container-xxl contact py-5">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6 wow fadeInLeft" data-wow-delay="0.1s">
                    <h5 class="styleText">Espace réservé aux membres du club Eolia. Sinon cliquez <a href="https://www.eolia-normandie.com/sport-index.php">ici</a></h5>
                    <p class="mb-4">Si vous possédez un compte : <a href="{{ path('app_login') }}">Se connecter</a></p>
                    {% if valide is defined and valide == false and not is_granted('ROLE_ADMIN') %}
                        <script>
                            function accountNotValidated() {
                                Swal.fire({
                                    icon: "error",
                                    title: "Veillez patienter",
                                    text: "Votre compte est en train d'être validé",
                                    footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
                                });
                            }
                            window.onload = accountNotValidated;
                        </script>
                    {% endif %}
                    <p class="mb-4 "></p>
                    <form method="post" enctype="multipart/form-data">
                        {{ form_errors(registrationForm) }}
                        {{ form_start(registrationForm) }}
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.username,
                                        {
                                            attr: {
                                            'type': 'text',
                                            'class': 'form-control',
                                            'id': 'username',
                                            'name': 'username',
                                            'autocomplete': 'username',
                                            'required': true,
                                            'autofocus': true
                                            }
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.plainPassword,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                            }
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.mail,
                                        {
                                            attr: {
                                            'type': 'text',
                                            'class': 'form-control',
                                            'id': 'username',
                                            'name': 'username',
                                            'autocomplete': 'username',
                                            'required': true,
                                            'autofocus': true
                                        }
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.prenom,
                                        {
                                            attr: {
                                            'type': 'text',
                                            'class': 'form-control',
                                            'id': 'username',
                                            'name': 'username',
                                            'autocomplete': 'username',
                                            'required': true,
                                            'autofocus': true
                                        }
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.nom,
                                        {
                                            attr: {
                                            'type': 'text',
                                            'class': 'form-control',
                                            'id': 'username',
                                            'name': 'username',
                                            'autocomplete': 'username',
                                            'required': true,
                                            'autofocus': true
                                            },
                                            label: 'Nom'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.dateNaiss,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                        },
                                            label: 'Date de naissance'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.sportPrincipal,
                                        {
                                            attr: {
                                            'type': 'text',
                                            'class': 'form-control',
                                            'id': 'username',
                                            'name': 'username',
                                            'autocomplete': 'username',
                                            'required': true,
                                            'autofocus': true
                                        }
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(registrationForm.certificatMedic, {label: 'Certificat médical'}) }}
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.codePostal,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                            },
                                            label: 'Code postal'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.ville,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                        },
                                            label: 'Ville'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.rue,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                        },
                                            label: 'Rue'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.civilite,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                        },
                                            label: 'Civilité'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.telephone,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                        },
                                            label: 'Téléphone'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.licence,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                        },
                                            label: 'Licence'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.cotisation,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                        },
                                            label: 'Cotisation'
                                        }
                                    ) }}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    {{ form_row(
                                        registrationForm.forfait,
                                        {
                                            attr: {
                                            'type': 'password',
                                            'class': 'form-control',
                                            'id': 'password',
                                            'name': 'password',
                                            'autocomplete': 'password',
                                            'required': true,
                                            'autofocus': false
                                        },
                                            label: 'Forfait'
                                        }
                                    ) }}
                                </div>
                                <div>
                                    <a href="https://www.eolia-normandie.com/clubeolia/info_inscription.php" target="_blank">Plus d'informations...</a>
                                </div>
                            </div>
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                            <div class="row g-3">
                                <div class="col-md-6 d-flex justify-content-lg-start">
                                    <div class="form-floating">
                                        <a href="{{ path('app_forgot_password_request') }}">Mot de passe oublié</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="col-12">
                                <button class="btn btn-primary rounded-pill py-3 px-5 blue" type="submit">Enregistrer</button>
                            </div>
                        </div>
                        {{ form_end(registrationForm) }}
                    </form>
                </div>
                <div class="col-lg-6 wow fadeInRight" data-wow-delay="0.5s">
                    <div class="h-100">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5197.203106417406!2d-0.8445321596900931!3d49.359689570883155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x480ba8296c61120d%3A0x3de2d6bbb644f1b3!2sEOLIA%20Normandie%20(CPNOB)!5e0!3m2!1sfr!2sfr!4v1704875614254!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}