{% extends "layout/app.twig" %}
{% block page_title_block %}{{ __(page_title_key) }}{% endblock %}

{% block content %}
    <div class="flex flex-col md:flex-row justify-between items-center mb-6">
        {# O Título H1 é gerenciado pelo Topbar #}
        <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.clients.create') }}" class="btn-primary inline-flex items-center w-full md:w-auto">
            <i class="fas fa-user-plus mr-2"></i> {{ __('button.new_client') }}
        </a>
    </div>
    {% include 'partials/flash_messages.twig' %}

    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="table-th">{{ __('table_header.name') }}</th>
                        <th class="table-th">{{ __('table_header.cpf_cnpj') }}</th>
                        <th class="table-th">{{ __('label.email') }}</th>
                        <th class="table-th">{{ __('label.phone') }}</th>
                        <th class="table-th">{{ __('table_header.type') }}</th>
                        <th class="table-th text-right">{{ __('table_header.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for client in clients %}
                    <tr>
                        <td class="table-td font-medium">{{ client.name }}</td>
                        <td class="table-td font-mono">{{ client.cpf_cnpj }}</td>
                        <td class="table-td">{{ client.email }}</td>
                        <td class="table-td">{{ client.phone }}</td>
                        <td class="table-td capitalize">{{ client.type == 'fisica' ? __('option.person_type_individual') : __('option.person_type_legal') }}</td>
                        <td class="table-td text-right">
                            <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.clients.setpassword.form', {'id': client.id}) }}" class="text-gray-500 hover:text-indigo-600 mr-3" title="{{ __('tooltip.set_password') }}"><i class="fas fa-key"></i></a>
                            <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.clients.edit', {'id': client.id}) }}" class="text-indigo-600 hover:text-indigo-900 mr-3" title="{{ __('button.edit') }}"><i class="fas fa-edit"></i></a>
                            <form action="{{ BASE_URL }}{{ routeParser.urlFor('admin.clients.delete', {'id': client.id}) }}" method="POST" class="inline-block" onsubmit="return confirm('{{ __('confirm_delete_message') }}');">
                                <input type="hidden" name="_METHOD" value="DELETE">
                                <button type="submit" class="text-red-600 hover:text-red-900" title="{{ __('button.delete') }}"><i class="fas fa-trash-alt"></i></button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" class="table-td text-center">{{ __('text.no_clients_found') }}</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        {% if totalPages > 1 %}
            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                 <div class="text-sm text-gray-700">
                    {{ __('pagination.displaying_items', {'shown': clients|length, 'total': totalItems, 'item_type': __('item_type.client_plural'), 'current': currentPage, 'pages': totalPages}) }}
                </div>
                {% include 'partials/pagination.twig' with {'totalPages': totalPages, 'currentPage': currentPage, 'baseUrl': baseUrl, 'queryParams': queryParams} %}
            </div>
        {% elseif totalItems > 0 %}
             <div class="bg-white px-4 py-3 text-sm text-gray-700 border-t border-gray-200 sm:px-6">
                {{ __('pagination.total_items_of_type', {'total': totalItems, 'item_type': __('item_type.client_plural')}) }}
            </div>
        {% endif %}
    </div>
    <style>.table-th{padding:0.75rem 1.5rem; text-align:left; font-size:0.75rem; font-weight:500; color:#6B7280; text-transform:uppercase; letter-spacing:0.05em;} .table-td{padding:0.75rem 1.5rem; font-size:0.875rem; color:#374151;}</style>
{% endblock %}