{% extends 'admin/layout.html.twig' %}
{% block title %}Customers - KitscoApp{% endblock %}
{% block page_title %}Customers{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <p class="text-sm text-gray-500">{{ customers|length }} customer(s)</p>
    <a href="{{ path('admin_customer_new') }}" class="inline-flex items-center gap-1.5 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-plus-circle"></i> Add Customer
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="px-4 py-3 text-left font-medium">Name</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Contact</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">City</th>
                    <th class="px-4 py-3 text-left font-medium hidden lg:table-cell">Phone</th>
                    <th class="px-4 py-3 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for customer in customers %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3">
                        <a href="{{ path('admin_customer_show', {id: customer.id}) }}" class="group">
                            <p class="font-semibold text-gray-800 group-hover:text-kitsco-accent transition-colors">{{ customer.name }}</p>
                            {% if customer.contactEmail %}<p class="text-xs text-gray-400">{{ customer.contactEmail }}</p>{% endif %}
                        </a>
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-600">{{ customer.contactPerson ?? '-' }}</td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-600">{{ customer.city ?? '-' }}</td>
                    <td class="px-4 py-3 hidden lg:table-cell text-gray-600">{{ customer.phone ?? '-' }}</td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-1">
                            <a href="{{ path('admin_customer_show', {id: customer.id}) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600" title="View"><i class="bi bi-eye text-sm"></i></a>
                            <a href="{{ path('admin_customer_edit', {id: customer.id}) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600" title="Edit"><i class="bi bi-pencil text-sm"></i></a>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-people text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No customers yet</p>
                            <p class="text-sm text-gray-400 mt-1">Add your first customer to start creating invoices.</p>
                            <a href="{{ path('admin_customer_new') }}" class="inline-flex items-center gap-1.5 mt-4 bg-kitsco-accent text-white font-medium py-2 px-4 rounded-lg text-sm"><i class="bi bi-plus-circle"></i> Add Customer</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}