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

{% block page_title %}Créer un Utilisateur{% 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">Créer un utilisateur</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Créer un nouveau compte utilisateur avec le rôle ROLE_EMPLOYER par défaut
                </p>
            </div>
            <a href="{{ path('manager_users_index') }}" 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>

    {# Form #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-8">
            {{ form_start(form, {'attr': {'class': 'space-y-6', 'data-controller': 'form-submit', 'data-form-submit-loading-value': 'Création 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.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.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'}}) }}
                            </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_index') }}" 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>
                        Créer l'utilisateur
                    </button>
                </div>

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