@props(['deal' => '', 'broker' => ''])
<x-ui.image-card class="deal-identifier deal-card shadow-lg cursor-pointer" :image="asset('storage/'.$deal->image)"
                 data-deal-id="{{$deal->id}}">
    <div class="bg-white pt-8 p-4 h-full space-y-2 flex flex-col justify-between">
        <div class="flex justify-between">
            <x-ui.button-sm variant="neutral">
                {{$deal->category->name}}
            </x-ui.button-sm>

            {{-- Show this to guest or customer --}}
            @if(!auth()->check() || (auth()->check() && auth()->user()->isCustomer()))
                <x-dashboard.user.action-toolbar :deal_title="$deal->title" :deal_id="$deal->id"
                                                 :is-liked="$deal->is_liked" :is-favourite="$deal->is_favorite"/>
            @endif
        </div>

        <p class="font-bold text-lg ">{{$deal->title}}</p>

        <p class="text-sm text-accent-600 wrap-break-word">{{$deal->description}}</p>
        @guest
            <a href="{{route('login.create')}}" class="flex space-x-2">
                <p class="font-bold hover:underline">Contact Broker</p>
                <x-heroicon-o-arrow-top-right-on-square class="w-4"/>
            </a>
        @endguest
        @auth
            <x-dashboard.user.broker-contact :broker="$broker"/>
        @endauth

        <div class="flex justify-between items-center">
            <div class="flex space-x-3">
                <x-dashboard.user.stat-badge id="{{'likeBadge'.$deal->id}}" :count="$deal->total_likes">
                    <x-heroicon-o-heart class="w-4"/>
                </x-dashboard.user.stat-badge>

                <x-dashboard.user.stat-badge id="{{'redirectBadge'.$deal->id}}" :count="$deal->total_redirection">
                    <x-heroicon-o-arrow-top-right-on-square class="w-4"/>
                </x-dashboard.user.stat-badge>
            </div>
            @if(filled($deal->link))
                <x-ui.button
                    onclick="redirect('{{\Illuminate\Support\Facades\URL::signedRoute('redirect', $deal->id)}}', {{$deal->id}})"
                    variant="neutral" class="flex space-x-2 items-center mt-2">
                    <p>View Deal</p>
                    <x-heroicon-o-arrow-top-right-on-square class="w-5 ml-1"/>
                </x-ui.button>
            @endif
        </div>
    </div>
</x-ui.image-card>