<div>
    <div class="relative pt-5 text-gray-900 dark:text-white xl:max-w-[95%] 2xl:max-w-[90%]" wire:keydown.right.window="nextPage" wire:keydown.left.window="previousPage">
        <div class="flex items-center justify-center">
            <div class="relative overflow-x-auto rounded-lg w-3/6">
                <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-white">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-pink-700 dark:text-neutral-200 ">
                        <tr>
                            <th scope="col" class="px-6 py-3">
                                Discord-ID
                                <input 
                                    class="w-4 h-4 ml-2 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                    type="checkbox" 
                                    wire:model.live="filtered" 
                                    value="true"
                                >
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Username
                                <input 
                                    wire:model.live.debounce.600ms="search" 
                                    type="search" 
                                    id="live-search" 
                                    class="ml-2 w-32 h-7 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" 
                                    placeholder="Search..."
                                >
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Patreon
                                <input 
                                    class="w-4 h-4 ml-2 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                    type="checkbox" 
                                    wire:model.live="patreon" 
                                    value="true"
                                >
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Banned
                                <input 
                                    class="w-4 h-4 ml-2 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                    type="checkbox" 
                                    wire:model.live="banned" 
                                    value="true"
                                >
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Created at
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Updated at
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                        <tr wire:key="user-{{ $user->id }}" class="bg-white border-t dark:bg-neutral-800 dark:border-pink-700">
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {{ $user->id }}
                            </th>
                            <td class="px-6 py-4">
                                {{ $user->global_name ?? $user->username }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $user->is_patreon ? 'Yes' : 'No' }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $user->is_banned ? 'Yes' : 'No' }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $user->created_at->format('Y-m-d') }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $user->updated_at->format('Y-m-d') }}
                            </td>
                            <td class="px-6 py-4">
                                <form method="POST" action="{{ route('admin.user.update') }}">
                                    @csrf
                                    <input type="hidden" value="{{ $user->id }}" name="id">
                                    <input type="hidden" value="{{ $user->is_banned ? 'unban' : 'ban' }}" name="action">
                                    <button type="submit" class="inline-block rounded bg-rose-600 pl-[4px] pr-[4px] p-[1px] text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
                                        {{ $user->is_banned ? 'Unban' : 'Ban' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        {{ $users->links('pagination::tailwind') }}
    </div>
</div>
