{% extends 'base.html.twig' %}

{% block title %}Changement de mot de passe requis{% endblock %}

{% block body %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 via-gray-100 to-gray-200 flex items-center justify-center px-4 py-8">
    <div class="w-full max-w-lg">
        {# Header Section #}
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-yellow-100 rounded-full mb-4">
                <svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">
                Changement de mot de passe requis
            </h1>
            <p class="text-gray-600">
                Pour votre sécurité, veuillez définir un nouveau mot de passe
            </p>
        </div>

        {# Form Card #}
        <div class="bg-white rounded-xl shadow-xl overflow-hidden">
            <div class="p-8">
                {{ form_start(changePasswordForm, {
                    'attr': {
                        'class': 'space-y-6',
                        'data-controller': 'change-password',
                        'data-action': 'submit->change-password#handleSubmit'
                    }
                }) }}

                    {# Current Password (if needed) #}
                    {% if changePasswordForm.currentPassword is defined %}
                    <div>
                        {{ form_label(changePasswordForm.currentPassword, 'Mot de passe actuel', {
                            'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}
                        }) }}
                        <div class="relative">
                            {{ form_widget(changePasswordForm.currentPassword, {
                                'attr': {
                                    'class': 'w-full px-4 py-3 pr-12 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all',
                                    'data-change-password-target': 'currentPassword',
                                    'placeholder': 'Entrez votre mot de passe actuel'
                                }
                            }) }}
                            <button type="button"
                                    data-action="click->change-password#togglePassword"
                                    data-field="current"
                                    class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-500 hover:text-gray-700">
                                <span data-icon>
                                    <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(changePasswordForm.currentPassword) }}
                    </div>
                    {% endif %}

                    {# New Password #}
                    <div>
                        {{ form_label(changePasswordForm.newPassword.first, 'Nouveau mot de passe', {
                            'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}
                        }) }}
                        <div class="relative">
                            {{ form_widget(changePasswordForm.newPassword.first, {
                                'attr': {
                                    'class': 'w-full px-4 py-3 pr-12 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all',
                                    'data-change-password-target': 'newPassword',
                                    'placeholder': 'Minimum 8 caractères'
                                }
                            }) }}
                            <button type="button"
                                    data-action="click->change-password#togglePassword"
                                    data-field="new"
                                    class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-500 hover:text-gray-700">
                                <span data-icon>
                                    <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(changePasswordForm.newPassword.first) }}
                    </div>

                    {# Confirm Password #}
                    <div>
                        {{ form_label(changePasswordForm.newPassword.second, 'Confirmer le mot de passe', {
                            'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}
                        }) }}
                        <div class="relative">
                            {{ form_widget(changePasswordForm.newPassword.second, {
                                'attr': {
                                    'class': 'w-full px-4 py-3 pr-12 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all',
                                    'data-change-password-target': 'confirmPassword',
                                    'placeholder': 'Confirmez votre mot de passe'
                                }
                            }) }}
                            <button type="button"
                                    data-action="click->change-password#togglePassword"
                                    data-field="confirm"
                                    class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-500 hover:text-gray-700">
                                <span data-icon>
                                    <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(changePasswordForm.newPassword.second) }}
                    </div>

                    {# Password Requirements #}
                    <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 rounded-r-lg">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-indigo-800">Votre mot de passe doit contenir :</p>
                                <ul class="mt-2 text-sm text-indigo-700 space-y-1">
                                    <li class="flex items-center">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Au moins 8 caractères
                                    </li>
                                    <li class="flex items-center">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Une lettre majuscule et minuscule
                                    </li>
                                    <li class="flex items-center">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Au moins un chiffre
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    {{ form_rest(changePasswordForm) }}

                    {# Submit Button #}
                    <div class="pt-2">
                        <button type="submit"
                                data-change-password-target="submit"
                                class="w-full flex justify-center items-center py-3.5 px-4 border-2 border-transparent rounded-lg text-base font-semibold text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                            </svg>
                            <span data-change-password-target="buttonText">Changer mon mot de passe</span>
                            <span data-change-password-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(changePasswordForm) }}
            </div>
        </div>

        {# Footer #}
        <div class="text-center mt-6 text-gray-600 text-sm">
            <p>&copy; {{ 'now'|date('Y') }} {{ system_name|default('2AB Portal') }}. Tous droits réservés.</p>
        </div>
    </div>
</div>
{% endblock %}