@section('wishlist-page')

<div class="bg-white rounded-xl overflow-hidden shadow-sm mb-6">
    <div class="px-6 py-4 border-b border-border">
        <h2 class="font-semibold text-lg">My Wishlist</h2>
    </div>
    <div class="px-6 py-4">
        @if($wishlistItems->isEmpty())
            <p class="text-text-secondary text-center py-8">
                Your wishlist is empty.
            </p>
        @else
            <div class="grid grid-cols-2 gap-4">
                @foreach($wishlistItems as $item)
                <div class="group rounded-lg border border-border bg-card hover:shadow-sm overflow-hidden">
                    <div class="relative">
                        @if($item->product->image)
                            <img src="{{ asset('storage/' . $item->product->image) }}" alt="{{$item->product->name}}" class="w-full h-40 object-cover">
                        @else
                            <div class="w-full h-40 bg-border text-center flex items-center justify-center">
                                <span class="text-text-secondary">No image</span>
                            </div>
                        @endif
                        <button type="button" class="absolute top-2 right-2 text-xs text-primary hover:underline">Remove from wishlist</button>
                    </div>
                    <div class="p-4">
                        <p class="font-medium line-clamp-2">{{ $item->product->name }}</p>
                        <p class="text-text-secondary text-sm line-clamp-1">{{ str_limit($item->product->slug ?? '', 30) }}</p>
                        <p class="mt-2 text-primary font-medium">KSh {{ number_format((float) $item->product->regular_price ?? 0, 2) }}</p>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="pt-6 text-center">
                <a href="{{ url('/shop') }}" class="text-sm font-medium text-primary hover:underline">Continue Shopping</a>
            </div>
        @endif
    </div>
</div>
@endsection