<table class="min-w-full divide-y divide-gray-300">
    <thead class="bg-gray-50">
        <tr>
            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Client</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Contact</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Business</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Loans</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Credit Score</th>
            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                <span class="sr-only">Actions</span>
            </th>
        </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 bg-white">
        {% for client in clients %}
        <tr class="hover:bg-gray-50 cursor-pointer transition-colors duration-150" onclick="openClientModal('{{ client.id }}')">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 sm:pl-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 flex-shrink-0">
                        {% if client.selfie %}
                            <img src="{{ client.selfie.url }}" alt="{{ client.get_full_name }}" 
                                 class="h-10 w-10 rounded-full object-cover border-2 border-gray-200">
                        {% else %}
                            <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                                <span class="text-sm font-medium text-white">{{ client.first_name|first }}{{ client.last_name|first }}</span>
                            </div>
                        {% endif %}
                    </div>
                    <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">{{ client.get_full_name }}</div>
                        <div class="text-sm text-gray-500">ID: {{ client.id_number|default:"N/A" }}</div>
                    </div>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                <div>{{ client.email|default:"N/A" }}</div>
                <div>{{ client.phone_number }}</div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                <div>{{ client.business_name|default:"N/A" }}</div>
                <div class="text-xs text-gray-400">{{ client.business_type|default:"N/A" }}</div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                    {% if client.status == 'active' %}bg-green-100 text-green-800
                    {% elif client.status == 'dormant' %}bg-yellow-100 text-yellow-800
                    {% elif client.status == 'blacklisted' %}bg-red-100 text-red-800
                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                    {{ client.status|title }}
                </span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                <div class="flex items-center">
                    <div>
                        <div>Active: {{ client.active_loans|default:"0" }}</div>
                        <div class="text-xs text-gray-400">Total: KES {{ client.total_borrowed|default:"0"|floatformat:2 }}</div>
                    </div>
                    <div class="ml-2" title="Click 'View Details' to manage client's loans">
                        <span>ℹ️</span>
                    </div>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                <div class="flex items-center">
                    <span class="text-sm font-medium {% if client.credit_score >= 80 %}text-green-600{% elif client.credit_score >= 60 %}text-yellow-600{% else %}text-red-600{% endif %}">
                        {{ client.credit_score }}/100
                    </span>
                </div>
            </td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                <div class="flex justify-end space-x-2">
                    <button onclick="event.stopPropagation(); openClientModal('{{ client.id }}')" 
                            class="text-secondary hover:text-primary transition-colors duration-150">
                        <i class="fas fa-eye"></i>
                    </button>
                    <a href="{% url 'loans:new_application' %}?client_id={{ client.id }}" 
                       onclick="event.stopPropagation();"
                       class="text-green-600 hover:text-green-800 transition-colors duration-150">
                        <i class="fas fa-plus-circle"></i>
                    </a>
                    <a href="{% url 'users:client_update' client.id %}" 
                       onclick="event.stopPropagation();"
                       class="text-blue-600 hover:text-blue-800 transition-colors duration-150">
                        <span>✏️</span>
                    </a>
                    <a href="{% url 'users:client_delete' client.id %}" 
                       onclick="event.stopPropagation();"
                       class="text-red-600 hover:text-red-800 transition-colors duration-150">
                        <span>🗑️</span>
                    </a>
                </div>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="7" class="px-6 py-4 text-center text-sm text-gray-500">
                <div class="flex flex-col items-center py-8">
                    <span>👥</span>
                    <p>No clients found matching your criteria.</p>
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table> 