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

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

{% block content %}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm: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.email }}</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ path('admin_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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour au profil
            </a>
        </div>
    </div>
</div>

<div class="bg-white shadow rounded-lg">
    <div class="px-4 py-5 sm:p-6">
        {{ form_start(form, {'attr': {'class': 'space-y-6', 'data-controller': 'form-submit profile-picture', 'enctype': 'multipart/form-data'}}) }}

        {# Profile Picture Section #}
        <div class="border-b border-gray-200 pb-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Photo de profil</h3>
            <div class="flex items-center space-x-6">
                <div class="shrink-0">
                    <div class="relative" data-profile-picture-target="preview">
                        <img src="{{ user.profilePhoto|profile_picture_url }}"
                             alt="{{ user.email }}"
                             class="h-24 w-24 rounded-full object-cover ring-4 ring-white">
                    </div>
                </div>
                <div class="flex-1">
                    <button type="button"
                            data-action="click->profile-picture#triggerUpload"
                            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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-camera mr-2"></i>
                        Changer la photo
                    </button>
                    <p class="mt-2 text-xs text-gray-500">
                        JPG, PNG ou WebP. 2MB maximum.
                    </p>
                    {{ form_widget(form.profilePicture, {'attr': {'class': 'hidden', 'data-action': 'change->profile-picture#preview'}}) }}
                    {{ form_errors(form.profilePicture) }}
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
            <div>
                {{ form_label(form.email, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.email, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.email) }}
            </div>

            <div>
                {{ form_label(form.username, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.username, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.username) }}
            </div>

            <div>
                {{ form_label(form.firstName, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.firstName, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.firstName) }}
            </div>

            <div>
                {{ form_label(form.lastName, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.lastName, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.lastName) }}
            </div>

            <div>
                {{ form_label(form.phone, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.phone, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.phone) }}
            </div>

            <div>
                {{ form_label(form.preferredLanguage, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.preferredLanguage, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.preferredLanguage) }}
            </div>

            <div>
                {{ form_label(form.timezone, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.timezone, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.timezone) }}
            </div>

            <div class="sm:col-span-2">
                {{ form_label(form.bio, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.bio, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm', 'rows': '3'}}) }}
                {{ form_errors(form.bio) }}
            </div>
        </div>

        <div class="border-t border-gray-200 pt-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Rôles</h3>
            <div class="space-y-2">
                {{ form_widget(form.roles) }}
                {{ form_errors(form.roles) }}
            </div>
        </div>

        <div class="border-t border-gray-200 pt-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Statut 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': 'focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded'}}) }}
                    </div>
                    <div class="ml-3 text-sm">
                        {{ form_label(form.isActive, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                        <p class="text-gray-500">L'utilisateur pourra se connecter si le compte est actif</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.emailVerified, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 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">Email vérifié</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="border-t border-gray-200 pt-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Sécurité</h3>
            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.is2faEnabled, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded'}}) }}
                    </div>
                    <div class="ml-3 text-sm">
                        {{ form_label(form.is2faEnabled, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                        <p class="text-gray-500">Authentification à deux facteurs</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.isIpValidationEnabled, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded'}}) }}
                    </div>
                    <div class="ml-3 text-sm">
                        {{ form_label(form.isIpValidationEnabled, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                        <p class="text-gray-500">Validation IP pour les nouvelles connexions</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.receiveLoginAlerts, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded'}}) }}
                    </div>
                    <div class="ml-3 text-sm">
                        {{ form_label(form.receiveLoginAlerts, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                        <p class="text-gray-500">Alertes de connexion par email</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.mustChangePassword, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded'}}) }}
                    </div>
                    <div class="ml-3 text-sm">
                        {{ form_label(form.mustChangePassword, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                        <p class="text-gray-500">Forcer le changement de mot de passe à la prochaine connexion</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="border-t border-gray-200 pt-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.emailNotifications, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 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': 'focus:ring-blue-500 h-4 w-4 text-blue-600 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': 'focus:ring-blue-500 h-4 w-4 text-blue-600 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>

        <div class="border-t border-gray-200 pt-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Options de modification</h3>
            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.sendEmail, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 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">L'utilisateur sera informé des modifications apportées à son compte</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end space-x-3 border-t border-gray-200 pt-6">
            <a href="{{ path('admin_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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Annuler
            </a>
            <button type="submit"
                    data-form-submit-target="submit"
                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-save mr-2"></i>
                <span data-form-submit-target="buttonText">Enregistrer les modifications</span>
                <span data-form-submit-target="spinner" class="hidden ml-2">
                    <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </span>
            </button>
        </div>

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