{% block body %}
<style>

    *,html{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 22px;

}

.container{
    width: 25rem;
    height: 27rem;
    /*background-image: linear-gradient(rgba(0,0,0,0.075),rgba(0,0,0,0.075)),url("https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/background_projectiles.png");*/
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
}

.form{
    padding: 23.5% 0%;
}

h1{
    padding: 30px;
    font-size: 35px;
    text-align: center;
    text-transform: uppercase;
}

input, #registration_form_job {
    width: 93%;
    background-color: #eee;
    margin: 10px;
    margin-left: 10px;
    padding: 8px;
    border: none;
    border-radius: 7px;
}
.registration-form-component {
    width: 93%;
    background-color: #eee;
    margin: 10px;
    margin-left: 10px;
    padding: 8px;
    border: none;
    border-radius: 7px;
}
.btn{
    width: 50%;
    background-color: rgba(231,180,52);
    margin-left: 10px;
    margin-left: 25%;
    padding: 7px;
    border: none;
    border-radius: 7px;
    margin-top: 20px;
    cursor: pointer;
}

p{
    margin-top: 20px;
    margin-left: 25%;
    color: #eee;
    font-weight: bold;
    font-family: sans-serif;
}

.signUp{
    color: rgba(192,8,5);
    cursor: pointer;
}

a{
    color: red;
    text-decoration: none;
}
a:hover {
    color: blue;
    text-decoration: underline;
}

</style>


    {% for flash_error in app.flashes('verify_email_error') %}
        <div class="alert alert-danger" role="alert">{#{ flash_error }#}</div>
    {% endfor %}

    
<div class="fill" style="background-image:url('https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/background_projectiles.png'); height: 100%;">
    <div class="container">
        <h1>Créez un compte</h1>
        {{ form_start(registrationForm) }}
            <!-- Photo du profil -->
            <div class="mb-3">
                <label for="formFile" class="form-label">Photo du profil</label>
                <input class="form-control" type="file" name="{{ field_name(registrationForm.userPhoto) }}" id="formFile">
            </div>

            <div class="my-custom-class-for-errors">
                {{ form_errors(registrationForm) }}
            </div>
            <div class="registration-form-field">
                {{ form_row(registrationForm.email) }}
            </div>
            <div class="registration-form-field">
                {{ form_row(registrationForm.nom) }}
            </div>
            <div class="registration-form-field">
                {{ form_row(registrationForm.prenom) }}
            </div>
            <div class="registration-form-field">
                {{ form_row(registrationForm.plainPassword) }}
            </div>
            <div class="registration-form-field">
                {{ form_widget(registrationForm.job) }}
            </div>
            <div class="registration-form-field">
                {{ form_widget(registrationForm.comments, { 'attr': { 
                    'rows' : '4'
                    }} ) 
                }}
            </div>

            <button type="submit" class="btn">Enregistrer</button>
            
            <input type="hidden" id="registration_form__token" name="registration_form[_token]" value="7b1e4.RP08-5E6gjM5Buue2WQQoK8Zc9VbufEDkwqjhApGfjY.JqRuv-RJxEp7P4bm7FxS8fctMbYf3YNa6XzS020kF3son3m_9FnlXwhNjA">
        <!--/form-->
        {{ form_end(registrationForm) }}
    </div>
</div>
{% endblock %}