{% extends "layout/auth_layout.twig" %}

{% block page_title_block %}{{ __('page_title.reset_password') }}{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-900 to-indigo-700 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-xl shadow-2xl">
        <div>
            <div class="text-center">
                <i class="fas fa-unlock-alt text-5xl text-blue-700 mb-3"></i>
                <h2 class="text-3xl font-extrabold text-gray-900">
                    {{ __('page_title.reset_password') }}
                </h2>
                <p class="mt-2 text-sm text-gray-600">
                    {{ __('auth.reset_password_instruction') }}
                </p>
            </div>
        </div>
        
        {# As mensagens flash já são incluídas no topo pelo layout/auth_layout.twig #}

        <form class="mt-8 space-y-6" action="{{ BASE_URL }}{{ routeParser.urlFor('auth.reset.password') }}" method="POST">
            {# Campo oculto para enviar o token de volta para o controller #}
            <input type="hidden" name="token" value="{{ token }}">
            
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">{{ __('label.password_new') }}</label>
                <input id="password" name="password" type="password" required
                       class="form-input {% if errors.password %}border-red-500{% endif %}"
                       placeholder="{{ __('placeholder.min_8_chars') }}">
                {% if errors.password %}<p class="text-red-500 text-xs mt-1">{{ errors.password }}</p>{% endif %}
            </div>

            <div>
                <label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1">{{ __('label.password_confirm') }}</label>
                <input id="password_confirm" name="password_confirm" type="password" required
                       class="form-input {% if errors.password_confirm %}border-red-500{% endif %}">
                {% if errors.password_confirm %}<p class="text-red-500 text-xs mt-1">{{ errors.password_confirm }}</p>{% endif %}
            </div>

            <div class="pt-4">
                <button type="submit"
                        class="group relative w-full flex justify-center py-3 px-4 border border-transparent 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">
                    {{ __('button.reset_password') }}
                </button>
            </div>
        </form>
    </div>
</div>
<style>.form-input {display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;} .form-input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.5);}</style>
{% endblock %}