{# templates/components/user_loans_results.html #}

{%- if users %}
    {# Results Table Card #}
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-green-600 text-white">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                        User
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                        Identification
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                        Active Loans
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                        Last Loan Date
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {%- for user in users %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="font-medium text-gray-900">{{ user.name }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                        {{ user.identification or 'N/A' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                              {% if user.loan_count and user.loan_count > 0 %}bg-green-100 text-green-800
                              {% else %}bg-gray-100 text-gray-800
                              {% endif %}">
                            {{ user.loan_count or 0 }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ user.last_loan_date or 'Never' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                        <a href="/user_loans/{{ user.id }}" 
                           class="text-green-600 hover:text-green-800 font-medium">
                            View Details
                        </a>
                    </td>
                </tr>
                {%- endfor %}
            </tbody>
        </table>
    </div>
    
    {# Pagination #}
    {%- if total_pages > 1 %}
    <nav class="flex items-center justify-between pt-4" aria-label="Table navigation">
        <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-500">
                Showing <span class="font-medium text-gray-900">{{ (page - 1) * per_page + 1 }}</span> 
                to <span class="font-medium text-gray-900">{{ min(page * per_page, total_users) }}</span> 
                of <span class="font-medium text-gray-900">{{ total_users }}</span> users
            </span>
        </div>
        
        <div class="flex items-center space-x-2">
            {# Previous Button #}
            {%- if page > 1 %}
            <a 
                href="/user_loans?page={{ page - 1 }}&search={{ search }}&status={{ status }}"
                hx-get="/user_loans?page={{ page - 1 }}&search={{ search }}&status={{ status }}"
                hx-target="#results-container"
                hx-swap="innerHTML"
                hx-include="[name='search'], [name='status']"
                class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700"
            >
                Previous
            </a>
            {%- else %}
            <span class="px-3 py-2 ml-0 leading-tight text-gray-300 bg-white border border-gray-300 rounded-l-lg cursor-not-allowed">
                Previous
            </span>
            {%- endif %}
            
            {# Page Numbers #}
            {%- if total_pages <= 7 %}
                {%- for p in range(1, total_pages + 1) %}
                {%- if p == page %}
                <span class="px-3 py-2 leading-tight text-white bg-green-600 border border-green-600 rounded">
                    {{ p }}
                </span>
                {%- else %}
                <a 
                    href="/user_loans?page={{ p }}&search={{ search }}&status={{ status }}"
                    hx-get="/user_loans?page={{ p }}&search={{ search }}&status={{ status }}"
                    hx-target="#results-container"
                    hx-swap="innerHTML"
                    hx-include="[name='search'], [name='status']"
                    class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
                >
                    {{ p }}
                </a>
                {%- endif %}
                {%- endfor %}
            {%- else %}
                {# Show first page #}
                <a 
                    href="/user_loans?page=1&search={{ search }}&status={{ status }}"
                    hx-get="/user_loans?page=1&search={{ search }}&status={{ status }}"
                    hx-target="#results-container"
                    hx-swap="innerHTML"
                    hx-include="[name='search'], [name='status']"
                    class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
                >
                    1
                </a>
                {%- if page > 3 %}
                <span class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300">...</span>
                {%- endif %}
                
                {# Show pages around current #}
                {%- for p in range(max(2, page - 2), min(total_pages - 1, page + 2) + 1) %}
                {%- if p == page %}
                <span class="px-3 py-2 leading-tight text-white bg-green-600 border border-green-600 rounded">
                    {{ p }}
                </span>
                {%- else %}
                <a 
                    href="/user_loans?page={{ p }}&search={{ search }}&status={{ status }}"
                    hx-get="/user_loans?page={{ p }}&search={{ search }}&status={{ status }}"
                    hx-target="#results-container"
                    hx-swap="innerHTML"
                    hx-include="[name='search'], [name='status']"
                    class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
                >
                    {{ p }}
                </a>
                {%- endif %}
                {%- endfor %}
                
                {%- if page < total_pages - 2 %}
                <span class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300">...</span>
                {%- endif %}
                
                {# Show last page #}
                <a 
                    href="/user_loans?page={{ total_pages }}&search={{ search }}&status={{ status }}"
                    hx-get="/user_loans?page={{ total_pages }}&search={{ search }}&status={{ status }}"
                    hx-target="#results-container"
                    hx-swap="innerHTML"
                    hx-include="[name='search'], [name='status']"
                    class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
                >
                    {{ total_pages }}
                </a>
            {%- endif %}
            
            {# Next Button #}
            {%- if page < total_pages %}
            <a 
                href="/user_loans?page={{ page + 1 }}&search={{ search }}&status={{ status }}"
                hx-get="/user_loans?page={{ page + 1 }}&search={{ search }}&status={{ status }}"
                hx-target="#results-container"
                hx-swap="innerHTML"
                hx-include="[name='search'], [name='status']"
                class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700"
            >
                Next
            </a>
            {%- else %}
            <span class="px-3 py-2 leading-tight text-gray-300 bg-white border border-gray-300 rounded-r-lg cursor-not-allowed">
                Next
            </span>
            {%- endif %}
        </div>
    </nav>
    {%- endif %}

{%- else %}
    {# No Results #}
    <div class="bg-white rounded-lg shadow p-8 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <h3 class="text-lg font-medium text-gray-900 mb-2">No users found</h3>
        <p class="text-gray-500 mb-4">
            {% if search %}
                No users match your search for "{{ search }}"
            {% elif status == 'with_loans' %}
                No users have active loans
            {% elif status == 'no_loans' %}
                All users have at least one active loan
            {% else %}
                There are no users in the system yet
            {% endif %}
        </p>
        <a href="/user_loans" 
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 transition-colors">
            Clear Filters
        </a>
    </div>
{%- endif %}