@props(['deals' => []])
<x-dashboard.card class="w-full">
    <h3 class="text-md font-bold mb-2">Approved deals</h3>
    <x-ui.table>
        <x-ui.table.head>
            <th>Title</th>
            <th>Description</th>
            <th>Link</th>
            <th>Category</th>
            <th>Broker</th>
        </x-ui.table.head>

        @forelse($deals as $deal)
            <x-ui.table.row>
                <td class="text-sm font-medium px-4 text-center truncate max-w-20">{{ucfirst($deal->title)}}</td>
                <td class="text-sm text-accent-600 px-4 text-center truncate max-w-60">{{$deal->description}}</td>
                <td class="text-sm px-4 text-center">{{$deal->link}}</td>
                <td class="text-sm px-4 text-center">{{$deal->category->name}}</td>
                <td class="text-sm px-4 text-center">{{$deal->broker->name}}</td>
{{--                <x-slot:actions>--}}
{{--                    <div class="flex items-center justify-center space-x-2 py-1 px-2">--}}
{{--                        <form action="{{route('admin.deals.approve', $deal)}}"--}}
{{--                              onsubmit="return confirm('Are you sure to activate the deal ?')" method="post"--}}
{{--                              class=" h-full items-center flex justify-center">--}}
{{--                            @csrf--}}
{{--                            <x-ui.button-sm tooltip="Approve deal" variant="green">--}}
{{--                                <x-heroicon-o-check class="w-4"/>--}}
{{--                            </x-ui.button-sm>--}}
{{--                        </form>--}}

{{--                        <form action="{{route('admin.deals.reject', $deal)}}"--}}
{{--                              onsubmit="return confirm('Are you sure to delete the deal ?')" method="post"--}}
{{--                              class=" h-full items-center flex justify-center">--}}
{{--                            @csrf--}}
{{--                            <x-ui.button-sm tooltip="Delete deal" variant="red">--}}
{{--                                <x-heroicon-o-x-mark class="w-4"/>--}}
{{--                            </x-ui.button-sm>--}}
{{--                        </form>--}}

{{--                        <x-ui.button-sm data-deal-id="{{$deal->id}}" class="view-deal-btn" tooltip="View Content" variant="ghost">--}}
{{--                            <x-heroicon-o-eye class="w-4"/>--}}
{{--                        </x-ui.button-sm>--}}
{{--                    </div>--}}
{{--                </x-slot:actions>--}}
            </x-ui.table.row>
        @empty
            <x-ui.table.row>
                <td colspan="5" class="text-center text-sm text-accent-600 py-2">No deals found</td>
            </x-ui.table.row>
        @endforelse
    </x-ui.table>
</x-dashboard.card>