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

{% block stylesheets %}
    <style>
        .form-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-family: sans-serif;
        }

        .form-container h1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-input {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            width: 95%;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 16px;
        }

        .form-input:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
            outline: none;
        }

        .btn-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .btn-save {
            padding: 5px 10px;
            text-decoration: none;
            color: white;
            background-color: #007bff;
            border-radius: 5px;
            font-weight: bold;
            margin-top: 25px;
        }

        .btn-list {
            padding: 5px 10px;
            text-decoration: none;
            color: white;
            background-color: red;
            border-radius: 5px;
            font-weight: bold;
        }

    </style>
{% endblock %}

{% block title %}Nouvelle Utilisateur{% endblock %}

{% block body %}
    <div class="form-container">
        <h1>Modifier Utilisateurs ! ✅</h1>

        {{ form_start(form) }}
        {{ form_errors(form) }}

        <div class="form-group">
            {{ form_row(form.Nom, {'attr': {'class': 'form-input'}, 'label': 'Nom'}) }}
        </div>
        <div class="form-group">
            {{ form_row(form.Prenom, {'attr': {'class': 'form-input'}, 'label': 'Prénom'}) }}
        </div>
        <div class="form-group">
            {{ form_row(form.UserIdentifier, {'attr': {'class': 'form-input'}, 'label': 'Email'}) }}
        </div>
        <div class="form-group">
            {{ form_row(form.Password, {'attr': {'class': 'form-input'}, 'label': 'Password'}) }}
        </div>
        <div class="form-group">
            {{ form_row(form.Roles, {'attr': {'class': 'form-input'}, 'label': 'Roles'}) }}
        </div>
        <div class="btn-container">
            {{ form_row(form.Modifier, {'attr': {'class': 'btn-save'}, 'label': 'Enregistrer'}) }}
        </div>

        {{ form_end(form) }}

        <div class="btn-container">
            <a href="{{ path('app_index') }}" class="btn-list btn-primary">Annuler</a>
        </div>
    </div>
{% endblock %}