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

{# O controller passará 'page_title_key' e 'page_title_params' para traduzir o título com o nome do cliente #}
{% block page_title_block %}{{ __(page_title_key, page_title_params) }}{% endblock %}

{% block content %}
    <div class="flex justify-between items-center mb-6">
        {# O título H1 é gerenciado pelo Topbar usando a mesma lógica do título da página #}
        <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.clients.index') }}" class="text-blue-600 hover:text-blue-800 inline-flex items-center">
            <i class="fas fa-arrow-left mr-2"></i> {{ __('link.back_to_clients') }}
        </a>
    </div>
    {% include 'partials/flash_messages.twig' %}

    <div class="bg-white shadow-md rounded-lg p-6 md:p-8 max-w-lg mx-auto">
        <div class="text-center mb-4">
             <i class="fas fa-key text-4xl text-blue-500"></i>
        </div>
        <p class="text-sm text-center text-gray-600 mb-6">
            {{ __('client.set_password_instruction', {'name': '<strong class="font-medium">' ~ client.name ~ '</strong>'}) | raw }}
        </p>
    
        <form action="{{ form_action }}" method="POST">
            <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">{{ __('label.password_new') }}*</label>
                <input type="password" name="password" id="password" required 
                       class="form-input {% if errors.password %}border-red-500{% endif %}"
                       placeholder="{{ __('placeholder.min_8_chars') }}">
                {% if errors.password %}<p class="form-error">{{ errors.password }}</p>{% endif %}
            </div>

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

            <div class="mt-8 pt-5 border-t border-gray-200 flex justify-end">
                <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.clients.index') }}" class="btn-secondary mr-3">
                    {{ __('button.cancel') }}
                </a>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save mr-2"></i> {{ __('button.set_password') | default('Definir Senha') }}
                </button>
            </div>
        </form>
    </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);}
        .form-error {color: #EF4444; font-size: 0.75rem; margin-top: 0.25rem;}
        .btn-primary {padding: 0.5rem 1rem; background-color: #4F46E5; color: white; font-weight: 500; border-radius: 0.375rem;} .btn-primary:hover{background-color: #4338CA;}
        .btn-secondary{padding: 0.5rem 1rem; background-color: #E5E7EB; color: #1F2937; border-radius: 0.375rem; border:1px solid #D1D5DB;}
    </style>
{% endblock %}