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

{% block title %}Détail de l'utilisateur{% endblock %}

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

        <div class="bg-white shadow-md rounded-lg p-6">
            <table class="min-w-full">
                <tbody>
                <tr class="border-b">
                    <th class="px-6 py-4 text-lg font-medium text-gray-700">ID</th>
                    <td class="px-6 py-4 text-lg text-gray-900">{{ user_app.id }}</td>
                </tr>
                <tr class="border-b">
                    <th class="px-6 py-4 text-lg font-medium text-gray-700">Nom</th>
                    <td class="px-6 py-4 text-lg text-gray-900">{{ user_app.lastName }}</td>
                </tr>
                <tr class="border-b">
                    <th class="px-6 py-4 text-lg font-medium text-gray-700">Prénom</th>
                    <td class="px-6 py-4 text-lg text-gray-900">{{ user_app.firstName }}</td>
                </tr>
                <tr class="border-b">
                    <th class="px-6 py-4 text-lg font-medium text-gray-700">Téléphone</th>
                    <td class="px-6 py-4 text-lg text-gray-900">{{ user_app.tel }}</td>
                </tr>
                <tr class="border-b">
                    <th class="px-6 py-4 text-lg font-medium text-gray-700">Adresse</th>
                    <td class="px-6 py-4 text-lg text-gray-900">{{ user_app.address }}</td>
                </tr>
                <tr class="border-b">
                    <th class="px-6 py-4 text-lg font-medium text-gray-700">E-mail</th>
                    <td class="px-6 py-4 text-lg text-gray-900">{{ user_app.mail }}</td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="mt-6 flex justify-between">
            <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_edit', {'id': user_app.id}) }}"
                   class="text-yellow-500 hover:text-yellow-700 text-lg">
                    <i class="fas fa-edit"></i> Modifier cet 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">
                    <i class="fas fa-trash-alt"></i> Supprimer
                </a>
            </div>
        </div>
    </div>
{% endblock %}