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

{% block page_title %}Réinitialiser le mot de passe - {{ user.fullName }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    {# Header #}
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Réinitialiser le mot de passe</h1>
                <p class="mt-2 text-sm text-gray-700">
                    {{ user.fullName }} - {{ user.email }}
                </p>
            </div>
            <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>

    {# Warning Alert #}
    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-yellow-400 text-xl"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-yellow-700">
                    Vous êtes sur le point de réinitialiser le mot de passe de cet utilisateur. Cette action remplacera immédiatement son mot de passe actuel.
                </p>
            </div>
        </div>
    </div>

    {# Form #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-8" data-controller="password-reset">
            {{ form_start(form, {'attr': {'class': 'space-y-6', 'data-action': 'submit->password-reset#handleSubmit'}}) }}

                {# Password Fields #}
                <div class="border-b border-gray-200 pb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-900">Nouveau mot de passe</h3>
                        <div class="flex space-x-2">
                            <button type="button"
                                    data-action="click->password-reset#generatePassword"
                                    class="inline-flex items-center px-3 py-2 border border-indigo-300 shadow-sm text-sm font-medium rounded-md text-indigo-700 bg-indigo-50 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
                                <i class="fas fa-random mr-2"></i>
                                Générer
                            </button>
                            <button type="button"
                                    data-action="click->password-reset#copyPassword"
                                    class="inline-flex items-center px-3 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-indigo-500 transition-all duration-200">
                                <i class="fas fa-copy mr-2"></i>
                                Copier
                            </button>
                        </div>
                    </div>

                    <div class="space-y-4">
                        {# First Password Field with Toggle #}
                        <div>
                            {{ form_label(form.plainPassword.first) }}
                            <div class="relative mt-1">
                                {{ form_widget(form.plainPassword.first, {
                                    'attr': {
                                        'class': 'block w-full pr-12 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',
                                        'data-password-reset-target': 'password'
                                    }
                                }) }}
                                <button type="button"
                                        data-action="click->password-reset#togglePassword"
                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-700 hover:text-gray-900 focus:outline-none">
                                    <span data-password-reset-target="toggleIcon">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                    </span>
                                </button>
                            </div>
                            {{ form_errors(form.plainPassword.first) }}
                        </div>

                        {# Second Password Field with Toggle #}
                        <div>
                            {{ form_label(form.plainPassword.second) }}
                            <div class="relative mt-1">
                                {{ form_widget(form.plainPassword.second, {
                                    'attr': {
                                        'class': 'block w-full pr-12 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',
                                        'data-password-reset-target': 'passwordConfirm'
                                    }
                                }) }}
                                <button type="button"
                                        data-action="click->password-reset#togglePasswordConfirm"
                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-700 hover:text-gray-900 focus:outline-none">
                                    <span data-password-reset-target="toggleIconConfirm">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                    </span>
                                </button>
                            </div>
                            {{ form_errors(form.plainPassword.second) }}
                        </div>
                    </div>

                    <div class="mt-4 p-4 bg-blue-50 rounded-md">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-info-circle text-blue-400"></i>
                            </div>
                            <div class="ml-3 text-sm text-blue-700">
                                <p><strong>Exigences du mot de passe :</strong></p>
                                <ul class="list-disc list-inside mt-2 space-y-1">
                                    <li>Minimum 8 caractères</li>
                                    <li>Au moins une lettre majuscule</li>
                                    <li>Au moins une lettre minuscule</li>
                                    <li>Au moins un chiffre</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                {# Options #}
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Options</h3>
                    <div class="space-y-4">
                        <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'}}) }}
                                <p class="text-gray-500">{{ form_help(form.mustChangePassword) }}</p>
                            </div>
                        </div>

                        <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>
                </div>

                {# Actions #}
                <div class="flex items-center justify-end space-x-4 pt-6">
                    <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 transition-all duration-200">
                        <i class="fas fa-times mr-2"></i>
                        Annuler
                    </a>
                    <button type="submit"
                            data-password-reset-target="submit"
                            class="inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-[0.98]">
                        <i class="fas fa-key mr-2"></i>
                        <span data-password-reset-target="buttonText" class="transition-all duration-200">Réinitialiser le mot de passe</span>
                        <span data-password-reset-target="spinner" class="hidden ml-2 animate-spin">
                            <svg class="h-5 w-5 text-white" 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>
</div>
{% endblock %}