{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Modifier {{ user.fullName }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    {# Header #}
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Modifier l'utilisateur</h1>
                <p class="mt-2 text-sm text-gray-700">
                    {{ user.fullName }} - {{ user.email }}
                </p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ path('manager_users_show', {id: user.id}) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Retour
                </a>
            </div>
        </div>
    </div>

    {# Form #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-8">
            {{ form_start(form, {'attr': {'class': 'space-y-6', 'enctype': 'multipart/form-data', 'data-controller': 'form-submit', 'data-form-submit-loading-value': 'Enregistrement en cours...'}}) }}

                {# Basic Information #}
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Informations de base</h3>
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            {{ form_row(form.profilePicture, {'attr': {'class': 'mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer bg-gray-50 focus:outline-none'}}) }}
                            {% if user.profilePhoto %}
                                <div class="mt-2">
                                    <img src="{{ asset('uploads/profiles/' ~ user.profilePhoto) }}" alt="{{ user.fullName }}" class="h-20 w-20 rounded-full object-cover">
                                </div>
                            {% endif %}
                        </div>
                        <div>
                            {{ form_row(form.email, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'}}) }}
                        </div>
                        <div>
                            {{ form_row(form.username, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'}}) }}
                        </div>
                        <div>
                            {{ form_row(form.firstName, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'}}) }}
                        </div>
                        <div>
                            {{ form_row(form.lastName, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'}}) }}
                        </div>
                        <div class="sm:col-span-2">
                            {{ form_row(form.phone, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'}}) }}
                        </div>
                        <div class="sm:col-span-2">
                            {{ form_row(form.bio, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'}}) }}
                        </div>
                    </div>
                </div>

                {# Roles #}
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Rôles</h3>
                    {{ form_row(form.roles) }}
                </div>

                {# Preferences #}
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Préférences</h3>
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div>
                            {{ form_row(form.preferredLanguage, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'}}) }}
                        </div>
                        <div>
                            {{ form_row(form.timezone, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'}}) }}
                        </div>
                    </div>
                </div>

                {# Account Settings #}
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Paramètres du compte</h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                {{ form_widget(form.isActive, {'attr': {'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}}) }}
                            </div>
                            <div class="ml-3 text-sm">
                                {{ form_label(form.isActive, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                {{ form_widget(form.emailVerified, {'attr': {'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}}) }}
                            </div>
                            <div class="ml-3 text-sm">
                                {{ form_label(form.emailVerified, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                                <p class="text-gray-500">{{ form_help(form.emailVerified) }}</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                {{ form_widget(form.mustChangePassword, {'attr': {'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}}) }}
                            </div>
                            <div class="ml-3 text-sm">
                                {{ form_label(form.mustChangePassword, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                            </div>
                        </div>
                    </div>
                </div>

                {# Notifications #}
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Notifications</h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                {{ form_widget(form.receiveLoginAlerts, {'attr': {'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}}) }}
                            </div>
                            <div class="ml-3 text-sm">
                                {{ form_label(form.receiveLoginAlerts, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                {{ form_widget(form.emailNotifications, {'attr': {'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}}) }}
                            </div>
                            <div class="ml-3 text-sm">
                                {{ form_label(form.emailNotifications, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                {{ form_widget(form.securityNotifications, {'attr': {'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}}) }}
                            </div>
                            <div class="ml-3 text-sm">
                                {{ form_label(form.securityNotifications, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                {{ form_widget(form.systemNotifications, {'attr': {'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}}) }}
                            </div>
                            <div class="ml-3 text-sm">
                                {{ form_label(form.systemNotifications, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                            </div>
                        </div>
                    </div>
                </div>

                {# Manager Options #}
                <div class="pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Options</h3>
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            {{ form_widget(form.sendEmail, {'attr': {'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}}) }}
                        </div>
                        <div class="ml-3 text-sm">
                            {{ form_label(form.sendEmail, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                            <p class="text-gray-500">{{ form_help(form.sendEmail) }}</p>
                        </div>
                    </div>
                </div>

                {# Actions #}
                <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
                    <a href="{{ path('manager_users_show', {id: user.id}) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-times mr-2"></i>
                        Annuler
                    </a>
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <i class="fas fa-check mr-2"></i>
                        Enregistrer les modifications
                    </button>
                </div>

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