{% if chats['chats'] %}
    {% for chat in chats['chats'] %}
    <li class="dark:bg-tokyo-bg-secondary" id="chat-{{ chat['id'] }}">
        <div class="flex hover:bg-tokyo-bg-accent transition-colors duration-150">
            <a href="{{ url_for('chat', chat_id=chat['id']) }}" class="flex-grow block">
                <div class="px-6 py-5">
                    <div class="flex items-center justify-between">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center text-sm">
                                <p class="font-medium text-tokyo-accent-blue truncate">{{ chat['title'] or 'Untitled Chat' }}</p>
                                <div class="ml-2 flex items-center space-x-2">
                                    <span class="inline-flex items-center rounded-full dark:bg-tokyo-bg-accent px-2.5 py-0.5 text-xs font-medium dark:text-tokyo-text">
                                        ID: {{ chat['id'] }}
                                    </span>
                                    <button class="copy-chat-id dark:text-tokyo-text-secondary hover:text-tokyo-accent-blue focus:outline-none focus:ring-1 focus:ring-tokyo-accent-blue rounded-md transition-colors duration-150"
                                            data-chat-id="{{ chat['id'] }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                          <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
                                          <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
                                        </svg>
                                    </button>
                                    <span class="copied-text text-tokyo-accent-green text-xs hidden">Copied!</span>
                                </div>
                            </div>
                            <div class="mt-2 flex">
                                <div class="flex items-center text-sm dark:text-tokyo-text">
                                    <span>Created {{ chat['created_at'].strftime('%Y-%m-%d %H:%M:%S') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="ml-4 flex-shrink-0">
                            <svg class="h-5 w-5 dark:text-tokyo-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </div>
            </a>
            <button onclick="confirmDeleteChat('{{ chat.id }}')"
                    class="px-6 py-5 text-tokyo-text-secondary hover:text-tokyo-accent-red focus:outline-none transition-colors duration-150">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    </li>
    {% endfor %}

    {# Pagination Controls #}
    {% if chats['pagination']['pages'] > 1 %}
    <div class="px-4 py-3 flex items-center justify-between border-t dark:border-tokyo-bg-accent dark:bg-tokyo-bg-secondary sm:px-6">
        <div class="flex-1 flex justify-between sm:hidden">
            {% if chats['pagination']['page'] > 1 %}
            <a href="{{ url_for('index', page=chats['pagination']['page'] - 1) }}" class="relative inline-flex items-center px-4 py-2 border dark:border-tokyo-bg-accent text-sm font-medium rounded-md dark:text-tokyo-text dark:bg-tokyo-bg-accent hover:bg-tokyo-bg-message transition-colors duration-150">
                Previous
            </a>
            {% endif %}
            {% if chats['pagination']['page'] < chats['pagination']['pages'] %}
            <a href="{{ url_for('index', page=chats['pagination']['page'] + 1) }}" class="ml-3 relative inline-flex items-center px-4 py-2 border dark:border-tokyo-bg-accent text-sm font-medium rounded-md dark:text-tokyo-text dark:bg-tokyo-bg-accent hover:bg-tokyo-bg-message transition-colors duration-150">
                Next
            </a>
            {% endif %}
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm dark:text-tokyo-text">
                    Showing
                    <span class="font-medium dark:text-tokyo-accent-blue">{{ ((chats['pagination']['page'] - 1) * chats['pagination']['per_page']) + 1 }}</span>
                    to
                    <span class="font-medium dark:text-tokyo-accent-blue">{{ min(chats['pagination']['page'] * chats['pagination']['per_page'], chats['pagination']['total']) }}</span>
                    of
                    <span class="font-medium dark:text-tokyo-accent-blue">{{ chats['pagination']['total'] }}</span>
                    results
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    {% if chats['pagination']['page'] > 1 %}
                    <a href="{{ url_for('index', page=chats['pagination']['page'] - 1) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border dark:border-tokyo-bg-accent dark:bg-tokyo-bg-accent text-sm font-medium dark:text-tokyo-text hover:bg-tokyo-bg-message transition-colors duration-150">
                        <span class="sr-only">Previous</span>
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                    {% endif %}
                    
                    {% for p in range(max(1, chats['pagination']['page'] - 2), min(chats['pagination']['pages'] + 1, chats['pagination']['page'] + 3)) %}
                    <a href="{{ url_for('index', page=p) }}" 
                       class="relative inline-flex items-center px-4 py-2 border dark:border-tokyo-bg-accent dark:bg-tokyo-bg-accent text-sm font-medium {% if p == chats['pagination']['page'] %}dark:text-tokyo-accent-blue dark:bg-tokyo-bg{% else %}dark:text-tokyo-text hover:bg-tokyo-bg-message{% endif %} transition-colors duration-150">
                        {{ p }}
                    </a>
                    {% endfor %}

                    {% if chats['pagination']['page'] < chats['pagination']['pages'] %}
                    <a href="{{ url_for('index', page=chats['pagination']['page'] + 1) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border dark:border-tokyo-bg-accent dark:bg-tokyo-bg-accent text-sm font-medium dark:text-tokyo-text hover:bg-tokyo-bg-message transition-colors duration-150">
                        <span class="sr-only">Next</span>
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                    {% endif %}
                </nav>
            </div>
        </div>
    </div>
    {% endif %}
{% else %}
    <li class="px-6 py-5 dark:bg-tokyo-bg-secondary">
        <div class="text-center text-sm dark:text-tokyo-text">
            No chats found
        </div>
    </li>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.copy-chat-id').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const chatId = this.getAttribute('data-chat-id');
            navigator.clipboard.writeText(chatId).then(() => {
                // Visual feedback: Show "Copied!" text
                const copiedText = this.nextElementSibling;
                copiedText.classList.remove('hidden');
                setTimeout(() => {
                    copiedText.classList.add('hidden');
                }, 1500);

                // Visual feedback - temporarily change the icon color
                const svg = this.querySelector('svg');
                svg.className.baseVal = 'h-4 w-4 text-tokyo-accent-green';
                setTimeout(() => {
                    svg.className.baseVal = 'h-4 w-4';
                }, 1000);
            }).catch(err => {
                console.error('Failed to copy:', err);
            });
        });
    });
});
</script>