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

{% block page_title %}Réinitialiser le mot de passe{% 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">Réinitialiser le mot de passe</h1>
            <p class="mt-2 text-sm text-gray-700">Pour {{ 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">
        <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"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Attention</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <ul class="list-disc pl-5 space-y-1">
                            <li>Cette action va réinitialiser le mot de passe de l'utilisateur</li>
                            <li>L'ancien mot de passe ne sera plus valide</li>
                            <li>Vous pouvez optionnellement envoyer le nouveau mot de passe par email</li>
                            <li>Il est recommandé de forcer l'utilisateur à changer son mot de passe</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {{ form_start(form, {'attr': {'class': 'space-y-6', 'data-controller': 'login-form'}}) }}

        <div class="space-y-6">
            <div>
                {{ form_label(form.plainPassword.first, 'Nouveau mot de passe', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                <div class="relative">
                    {{ form_widget(form.plainPassword.first, {'attr': {'class': 'mt-1 block w-full pr-12 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm', 'placeholder': 'Entrez le nouveau mot de passe', 'data-login-form-target': 'password'}}) }}
                    <button
                        type="button"
                        data-action="click->login-form#togglePassword"
                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none">
                        <span data-login-form-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) }}
                <p class="mt-2 text-sm text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Le mot de passe doit contenir au moins 8 caractères, une majuscule, une minuscule et un chiffre.
                </p>
            </div>

            <div>
                {{ form_label(form.plainPassword.second, 'Confirmer le mot de passe', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                <div class="relative">
                    {{ form_widget(form.plainPassword.second, {'attr': {'class': 'mt-1 block w-full pr-12 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm', 'placeholder': 'Confirmez le nouveau mot de passe', 'data-login-form-target': 'password'}}) }}
                    <button
                        type="button"
                        data-action="click->login-form#togglePassword"
                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none">
                        <span data-login-form-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.second) }}
                {{ form_errors(form.plainPassword) }}
            </div>

            <div class="border-t border-gray-200 pt-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.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">
                                Envoyer un email à l'utilisateur avec son nouveau mot de passe
                            </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">
                                Recommandé : l'utilisateur devra changer ce mot de passe lors de sa prochaine connexion
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-blue-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-blue-700">
                            <strong>Conseil de sécurité :</strong> Pour une sécurité optimale, il est recommandé de cocher les deux options :
                            envoyer le mot de passe par email et forcer son changement à la prochaine connexion.
                        </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" 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-key mr-2"></i>
                Réinitialiser le mot de passe
            </button>
        </div>

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

<div class="bg-white shadow rounded-lg mt-6">
    <div class="px-4 py-5 sm:p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">
            <i class="fas fa-history mr-2 text-gray-500"></i>
            Historique du mot de passe
        </h3>
        <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
            <div class="border-l-4 border-blue-400 pl-4">
                <dt class="text-sm font-medium text-gray-500">Dernier changement</dt>
                <dd class="mt-1 text-sm text-gray-900">
                    {% if user.lastPasswordChangedAt %}
                        {{ user.lastPasswordChangedAt|date('d/m/Y à H:i') }}
                    {% else %}
                        <span class="text-gray-400">Jamais changé</span>
                    {% endif %}
                </dd>
            </div>
            <div class="border-l-4 {{ user.mustChangePassword ? 'border-orange-400' : 'border-green-400' }} pl-4">
                <dt class="text-sm font-medium text-gray-500">Changement requis</dt>
                <dd class="mt-1 text-sm">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ user.mustChangePassword ? 'bg-orange-100 text-orange-800' : 'bg-green-100 text-green-800' }}">
                        <i class="fas fa-{{ user.mustChangePassword ? 'exclamation-circle' : 'check-circle' }} mr-1"></i>
                        {{ user.mustChangePassword ? 'Oui' : 'Non' }}
                    </span>
                </dd>
            </div>
        </dl>
    </div>
</div>
{% endblock %}