@props(['users'])
<div class="overflow-x-auto">
    <table
        class="w-full min-w-full table-auto whitespace-nowrap rounded-lg bg-gray-50 text-left text-sm text-gray-500 rtl:text-right">
        <thead class="rounded-lg bg-gray-50 text-sm text-gray-700">
            <tr>
                <th scope="col" class="cursor-pointer px-6 py-4">SNo.</th>
                <th scope="col" class="cursor-pointer px-6 py-4">Username</th>
                <th scope="col" class="cursor-pointer px-6 py-4">Fullname</th>
                <th scope="col" class="cursor-pointer px-6 py-4">
                    Contact
                </th>
                <th scope="col" class="cursor-pointer px-6 py-4">
                    Email
                </th>
                <th scope="col" class="cursor-pointer px-6 py-4">
                    Portfolio
                </th>
                <th scope="col" class="cursor-pointer px-6 py-4">Status</th>
                <th scope="col" class="cursor-pointer px-6 py-4">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $index => $user)
                <tr wire:key="{{ $user->id }}" class="border-b bg-white">
                    <td scope="col" class="px-6 py-4">
                        {{ $users->firstItem() + $index }}
                    </td>
                    <td scope="col" class="cursor-pointer px-6 py-4 hover:text-blue-600"
                        wire:click="viewTransaction('{{ $user->id }}')">
                        {{ $user->Accountname }}
                    </td>
                    <td scope="col" class="px-6 py-4">
                        {{ $user->Username }}
                    </td>
                    <td scope="col" class="px-6 py-4">
                        {{ $user->Contact }}
                    </td>
                    <td scope="col" class="px-6 py-4">
                        {{ $user->Email }}
                    </td>
                    <td scope="col" class="px-6 py-4">
                        {{ $user->user_position }}
                    </td>
                    <td scope="col" class="px-6 py-4">
                        <span
                            class="{{ $user->user_status === 'Verified' ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600' }} rounded-full px-5 py-1 text-sm">
                            {{ $user->user_status }}
                        </span>
                    </td>
                    <td scope="col" class="flex space-x-3 px-6 py-4 md:space-x-5">
                        <div class="cursor-pointer" wire:click="viewTransaction('{{ $user->id }}')">
                            <i class="ri-eye-fill text-gray-500"></i>
                        </div>

                        <div class="cursor-pointer" wire:click="deleteUser('{{ $user->id }}')">
                            <i class="ri-delete-bin-6-fill text-red-500"></i>
                        </div>
                    </td>
                </tr>
            @endforeach

        </tbody>
    </table>
</div>

<div class="flex w-full justify-between">
    {{ $users->links(data: ['scrollTo' => false]) }}
</div>
