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

{% block style %}
<style>
    #formDiv {
        align-content:center;
        color:#05070D;
    }

    #formDiv > div {
        background-color:#081B26;
        color:white;
        padding: 60px;
        padding-top: 40px;
        padding-bottom: 40px;
        border-radius: 20px;
    }

    #formDiv h1 {
        margin-top: 0px;
        margin-bottom: 40px;
        text-align:center;
    }

    form {
        display: flex;
        flex-direction: column; 
        margin:0;
    }

    form div {
        display: flex;
        flex-direction: column;
    }

    form label {
        margin-bottom: 10px;
    }

    form input {
        margin-bottom: 20px;
        border: solid 1px #05070D;
        border-radius: 20px;
        padding: 10px;
    }

    form button {
        margin-top:20px;
        background-color: #05070D;
        border: solid 1px #05070D;
        border-radius: 10px;
        color: white;
        font-size: 20px;
        padding: 10px;
        display:flex;
        flex-grow:1;
        justify-content:center;
    }
</style>
{% endblock %}

{% block nav %}
    <div>
        <a href="{{ path('app_login') }}">Connexion</a>
    </div>
{% endblock %}

{% block body %}
    <div id="formDiv">
        <div>
            <h1>Inscription</h1>

            {{ form_errors(registrationForm) }}

            {{ form_start(registrationForm) }}
                {{ form_row(registrationForm.username, {
                    label: "Nom d'utilisateur"
                }) }}
                {{ form_row(registrationForm.plainPassword, {
                    label: 'Mot de passe'
                }) }}
                <button type="submit" class="btn">Inscription</button>
            {{ form_end(registrationForm) }}
        </div>
    </div>
{% endblock %}