@props(['id' => '', 'image' => '', 'title' => '', 'category' => '', 'impressions' => 0, 'likes' => 0, 'clicks' => 0, 'status' => false, 'external_link' => ''])

<x-ui.image-card :image="$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 ">{{$title}}</p>

                @if($external_link !== '')
                    <a href="{{$external_link}}" target="_blank" title="{{$external_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($status == 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">{{$category}}</p>

            <x-dashboard.listing-stats :impression="$impressions" :likes="$likes" :clicks="$clicks"/>

            <div class="flex justify-between space-x-4">
                <x-ui.button :link="route('broker.deals.edit', $id)" class="w-full border border-accent-600/30"
                             icon="pencil-square">Edit
                </x-ui.button>
                <form class="w-full" method="post" action="{{route('broker.deals.destroy', $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>