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

{% block title %}Modifier l'utilisateur{% endblock %}

{% block body %}
    <div class="container mx-auto p-6">
        <h1 class="text-4xl font-semibold text-gray-800 mb-6">Modifier l'utilisateur</h1>

        <div class="bg-white shadow-md rounded-lg p-6">
            {{ form_start(form) }}

            <div class="space-y-6">
                {{ form_row(form.nickname, {'attr': {'class': 'w-full p-3 border rounded-md'}}) }}
                {{ form_row(form.firstName, {'attr': {'class': 'w-full p-3 border rounded-md'}}) }}
                {{ form_row(form.lastName, {'attr': {'class': 'w-full p-3 border rounded-md'}}) }}
                {{ form_row(form.tel, {'attr': {'class': 'w-full p-3 border rounded-md'}}) }}
                {{ form_row(form.address, {'attr': {'class': 'w-full p-3 border rounded-md'}}) }}
                {{ form_row(form.mail, {'attr': {'class': 'w-full p-3 border rounded-md'}}) }}
                {{ form_row(form.password, {'attr': {'class': 'w-full p-3 border rounded-md'}}) }}
            </div>

            <div class="mt-6">
                {{ form_widget(form) }}
            </div>

            <button type="submit" class="bg-teal-500 hover:bg-teal-600 text-white px-6 py-3 rounded-lg mt-4">
                Mettre à jour
            </button>

            {{ form_end(form) }}
        </div>

        <div class="mt-6 flex justify-between items-center">
            <a href="{{ path('app_user_index') }}" class="text-teal-500 hover:text-teal-700 text-lg">
                <i class="fas fa-arrow-left"></i> Retour à la liste des utilisateurs
            </a>

            <div class="flex items-center space-x-4">
                <a href="{{ path('app_user_show', {'id': user_app.id}) }}" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg">
                    Voir l'utilisateur
                </a>

                <a href="{{ path('app_user_delete', {'id': user_app.id}) }}" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg">
                    Supprimer
                </a>
            </div>
        </div>
    </div>
{% endblock %}