@props(['deal'])
<x-ui.image-card :image="asset('storage/'.$deal->image)">
    <div class="bg-white pt-8 p-4 h-full space-y-4 flex flex-col justify-between">
        <div class="flex justify-between items-start">

            <div class="flex items-start space-x-1 mr-2">
                <p class="font-bold text-lg ">{{$deal->title}}</p>

                @if(filled($deal->link))
                    <a href="{{\Illuminate\Support\Facades\URL::signedRoute('redirect', $deal->id)}}" target="_blank" title="{{$deal->link}}"
                       class="text-xs underline text-accent-601 mt-1">
                        <x-heroicon-o-arrow-top-right-on-square class="w-4 stroke-2 "/>
                    </a>
                @endif

            </div>

            @if($deal->active == 1)
                <x-ui.badge title="Active"/>
            @else
                <x-ui.badge title="Pending" variant="ghost"/>
            @endif

        </div>

        <div class="flex flex-col space-y-4">
            <p class="text-accent-600">{{$deal->category->name}}</p>

            <x-dashboard.broker.listing-stats :views="$deal->total_views ?? 0" :likes="$deal->total_likes ?? 0" :clicks="$deal->total_redirection ?? 0"/>

            <div class="flex justify-between space-x-4">
                <x-ui.button :link="route('broker.deals.edit', $deal->id)" class="w-full border border-accent-600/30"
                             icon="pencil-square">Edit
                </x-ui.button>
                <form class="w-full" onsubmit="return confirm('Are you sure to delete this ?')" method="post" action="{{route('broker.deals.destroy', $deal->id)}}">
                    @csrf
                    @method("DELETE")
                    <x-ui.button variant="red" class="w-full" icon="trash" >Delete</x-ui.button>
                </form>
            </div>
        </div>

    </div>
</x-ui.image-card>