@props(['activeBrokers'])
<x-dashboard.card class="w-full">

    <h3 class="text-md font-bold mb-4">Active Brokers</h3>
    <x-ui.table>
        <x-ui.table.head>
            <th>Name</th>
            <th>Email</th>
            <th>Location</th>
        </x-ui.table.head>

        @forelse($activeBrokers as $broker)
            <x-ui.table.row>
                <td class="text-sm px-4 text-center">{{$broker->user->name}}</td>
                <td class="text-sm px-4 text-center">{{$broker->user->email}}</td>
                <td class="text-sm px-4 text-center">{{$broker->location}}</td>
                <x-slot:actions>
                    <div class="flex items-center justify-center space-x-2 py-1 px-4">
                        <x-ui.button-sm tooltip="Edit Broker" :link="route('admin.brokers.edit', $broker)" variant="ghost">
                            <x-heroicon-o-pencil-square class="w-4"/>
                        </x-ui.button-sm>
                        <form action="{{route('admin.brokers.destroy', $broker)}}"
                              onsubmit="return confirm('Are you sure to delete this ?')" method="post"
                              class=" h-full items-center flex justify-center">
                            @csrf
                            @method('DELETE')
                            <x-ui.button-sm tooltip="Remove Broker" variant="red">
                                <x-heroicon-o-trash class="w-4"/>
                            </x-ui.button-sm>
                        </form>
                        <x-ui.button-sm tooltip="Login as this user" :link="route('impersonate', ['user' => $broker->user->id])"
                                        variant="neutral">
                            <x-heroicon-o-camera class="w-4"/>
                        </x-ui.button-sm>
                    </div>
                </x-slot:actions>
            </x-ui.table.row>
        @empty
            <x-ui.table.row>
                <td colspan="4" class="text-center text-sm text-accent-600 py-2">No Broker found</td>
            </x-ui.table.row>
        @endforelse
    </x-ui.table>
    </x-dashboard.card>