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

{% block title %}Nouvel Agent - Sécurité{% endblock %}

{% block body %}
<div style="max-width: 600px; margin: 40px auto; padding: 0 20px;">
    
    <div style="margin-bottom: 20px;">
        <a href="{{ path('app_user_index') }}" style="text-decoration: none; color: #666;">⬅ Retour à la liste des agents</a>
    </div>

    <div class="sjc-card" style="background: var(--sjc-blanc); border-radius: 8px; padding: 30px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); border-left: 4px solid var(--sjc-secondaire);">
        <h2 style="margin-bottom: 5px;">🔐 Créer un accès agent</h2>
        <p style="color: #666; margin-bottom: 25px;">Définissez l'identifiant et les droits de ce nouvel utilisateur.</p>

        {{ form_start(form) }}
            
            <div style="margin-bottom: 15px;">
                {{ form_row(form.email) }}
            </div>

            {# Le champ rôles avec les cases à cocher #}
            <div style="margin-bottom: 20px; background-color: #f8f9fa; padding: 15px; border-radius: 5px; border: 1px solid #e9ecef;">
                {{ form_row(form.roles) }}
            </div>

            <div style="margin-bottom: 25px;">
                {{ form_row(form.plainPassword) }}
            </div>
            
            <button type="submit" class="w-100 fw-bold" style="background-color: #2c3e50; color: white; padding: 12px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; transition: background-color 0.3s;">
                Enregistrer ce compte
            </button>
            
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}