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

{% block page_title %}تغییر کلمه عبور{% endblock %}
{% block page_subtitle %}کلمه عبور جدید خود را وارد کنید{% endblock %}

{% block auth_content %}
    <div class="text-center mb-8">
        <img src="{{ asset('/img/icons/lock.svg') }}" alt="قفل" class="icon-svg-large icon-lock text-blue-600">
        <p class="text-gray-600 mt-4">کلمه عبور جدید خود را وارد کنید.</p>
    </div>

    {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'class': 'space-y-6'}}) }}
    
    <div class="space-y-4">
        <div>
            {{ form_label(form.plainPassword.first, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
            {{ form_widget(form.plainPassword.first, {'attr': {'class': 'w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-left', 'placeholder': 'کلمه عبور جدید خود را وارد کنید'}}) }}
            {{ form_errors(form.plainPassword.first) }}
        </div>

        <div>
            {{ form_label(form.plainPassword.second, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
            {{ form_widget(form.plainPassword.second, {'attr': {'class': 'w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-left', 'placeholder': 'کلمه عبور جدید را مجدداً وارد کنید'}}) }}
            {{ form_errors(form.plainPassword.second) }}
        </div>
    </div>

    <button class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl flex items-center justify-center gap-2" type="submit">
        <img src="{{ asset('/img/icons/lock.svg') }}" alt="تغییر" class="icon-svg icon-lock">
        تغییر کلمه عبور
    </button>

    {{ form_end(form) }}

    <div class="mt-8 text-center">
        <a href="{{ path('customer_login') }}" class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">
            <img src="{{ asset('/img/icons/arrow-left.svg') }}" alt="بازگشت" class="icon-svg icon-arrow-left ml-2">
            بازگشت به صفحه ورود
        </a>
    </div>
{% endblock %}