{% extends 'dashboard/base.html.twig' %}

{% block main %}
<div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
        <div>
            <h1 class="text-3xl font-bold text-white tracking-tight">User Directory</h1>
            <p class="text-slate-400 mt-1 text-sm">Manage system access and account permissions.</p>
        </div>
    
        <div class="flex flex-col md:flex-row items-center gap-4">
            <div class="relative group">
                <div class="absolute -inset-0.5 bg-gradient-to-r from-emerald-500 to-blue-500 rounded-xl blur opacity-20 group-hover:opacity-60 transition duration-300"></div>
                <input type="text" id="serverSearch" placeholder="Filter by name..." 
                    class="relative bg-slate-900/80 border border-white/10 text-white text-sm rounded-xl px-4 py-3 w-64 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all">
            </div>

            <a href="{{ path('user_form') }}" class="relative group inline-flex items-center">
                <div class="absolute -inset-0.5 bg-gradient-to-r from-emerald-400 to-emerald-600 rounded-xl blur opacity-40 group-hover:opacity-100 transition duration-300"></div>
                
                <span class="relative flex items-center bg-slate-900 hover:bg-slate-800 text-white px-5 py-3 rounded-xl border border-white/10 transition-all">
                    <svg class="w-5 h-5 mr-2 text-emerald-400 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    <span class="text-sm font-bold tracking-wide">New User</span>
                </span>
            </a>
        </div>
    </div>

    <div class="relative overflow-hidden bg-slate-900/40 backdrop-blur-xl border border-white/5  shadow-2xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="border-b border-white/5 bg-white/[0.02]">
                        <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Identity</th>
                        <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Email Address</th>
                        <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Access Level</th>
                        <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold text-right">Actions</th>
                    </tr>
                </thead>
                <tbody id="userTableBody" class="divide-y divide-white/[0.05]">
                    </tbody>
            </table>
        </div>

        <div class="px-6 py-4 bg-white/[0.02] border-t border-white/5 flex items-center justify-between">
            <button id="prevPage" class="px-4 py-2 rounded-xl border border-white/10 text-slate-400 hover:bg-white/5 hover:text-white transition-all text-sm disabled:opacity-30 disabled:cursor-not-allowed">
                Previous
            </button>
            <span id="pageInfo" class="text-xs font-mono text-slate-500 uppercase tracking-widest">Page 1 of 1</span>
            <button id="nextPage" class="px-4 py-2 rounded-xl border border-white/10 text-slate-400 hover:bg-white/5 hover:text-white transition-all text-sm disabled:opacity-30 disabled:cursor-not-allowed">
                Next
            </button>
        </div>
    </div>
</div>

<script>
  let currentPage = 1;
    let searchTimeout;

    async function loadUsers(page = 1, query = '') {
        const tbody = document.getElementById('userTableBody');
        tbody.style.opacity = '0.5';

        try {
            const response = await fetch(`{{ path('user_ajax_list') }}?page=${page}&q=${query}`);
            const result = await response.json();
            
            tbody.innerHTML = result.data.map(user => {
                const updateUrl = `{{ path('user_form', {'action': 'u', 'id': 'ID_PLACEHOLDER'}) }}`.replace('ID_PLACEHOLDER', user.id);

                return `
                <tr class="group hover:bg-white/[0.02] transition-colors">
                    <td class="px-6 py-5">
                        <div class="flex items-center space-x-3">
                            <div class="h-9 w-9 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 font-bold text-xs">
                                ${user.firstName.charAt(0)}${user.lastName.charAt(0)}
                            </div>
                            <span class="text-slate-200 font-medium group-hover:text-white transition-colors">
                                ${user.firstName} ${user.lastName}
                            </span>
                        </div>
                    </td>
                    <td class="px-6 py-5 text-slate-400 text-sm font-mono">${user.email}</td>
                    <td class="px-6 py-5">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                            ${user.type}
                        </span>
                    </td>
                    <td class="px-6 py-5 text-right">
                        <a href="${updateUrl}" class="inline-block text-slate-500 hover:text-emerald-400 transition-all hover:scale-110 mr-3" title="Edit User">
                             <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                             </svg>
                        </a>
                    </td>
                </tr>
            `}).join('');

            document.getElementById('pageInfo').innerText = `Page ${result.page} of ${result.last_page}`;
            document.getElementById('prevPage').disabled = (result.page <= 1);
            document.getElementById('nextPage').disabled = (result.page >= result.last_page);
            currentPage = result.page;
        } finally {
            tbody.style.opacity = '1';
        }
    }
    document.getElementById('serverSearch').addEventListener('input', (e) => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => loadUsers(1, e.target.value), 400);
    });

    document.getElementById('prevPage').onclick = () => loadUsers(currentPage - 1, document.getElementById('serverSearch').value);
    document.getElementById('nextPage').onclick = () => loadUsers(currentPage + 1, document.getElementById('serverSearch').value);

    loadUsers();
</script>
{% endblock %}