{% block body %}
<style>

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

}
.form-position {
    margin-top: 25vh;
}
.container{
    width: 25rem;
    height: 26rem;
    /*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;
    box-shadow: 12px 12px 45px 12px #a7a5a5;
    margin: 0 auto;
    border-radius: 20px;
}

.form{
    padding: 23.5% 0%;
}

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

input{
    width: 93%;
    background-color: #eee;
    margin: 10px;
    margin-left: 10px;
    padding: 8px;
    border: none;
    border-radius: 7px;

}
.btn{
    width: 50%;
    background-color: #007AFF;/*rgba(231,180,52);*/
    margin-left: 10px;
    margin-left: 25%;
    padding: 7px;
    border: none;
    border-radius: 20px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 12px 12px 45px 12px #a7a5a5;
    color: white;
    font-weight: bold;
}
.btn:hover {
    background-color: #32ADE6;
    box-shadow: 0px 0px 0px 0px #a7a5a5;
}   
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;
}
.error-message {
    color: red;
    text-align: center;
}
body {
    background-image:url('https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/background_projectiles.png'); 
    height: 100%;
}
form h1 {
    text-align: center;
}

</style>
<div class="form-position">
    <div class="container">
        
        <form action="{{ path('app_login') }}" method="post" class="form">
            <h1>Connectez-vous à l'application</h1>
            <input type="text" id="username" name="_username" value="{{ last_username }}" placeholder="Email">
            <input type="password" id="password" name="_password" placeholder="Mot de passe">
            {% if error %}
                <div class="error-message">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}
            {# If you want to control the URL the user is redirected to on success
            <input type="hidden" name="_target_path" value="/account"> #}
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
            <button class="btn" type="submit">Se connecter</button>
            <p style="color: green;">Pas encore de compte ?</p>
            <p><span class="signUp"><a href="/register">Créez en un !</a></span></p>
        </form>
    </div>
</div>
{% endblock %}