<div>
    <div class="mb-4">
        <h3 class="font-bold text-lg mb-2">Selecciona los productos que se incluirán en esta licencia.</h3>
    </div>

    <div class="w-full space-y-2 max-h-96 overflow-y-auto">
        @forelse($products as $product)
            <div class="w-full flex items-center justify-between py-3 px-4 border border-gray-200 rounded-lg hover:bg-gray-50">
                <div class="flex items-center justify-start flex-1">
                    <div class="flex items-center justify-start mr-3 border border-gray-200 rounded-lg p-1">
                        <img src="{{ $product->image_url ?? asset('images/placeholder.png') }}" alt="{{ $product->name }}"
                            class="w-10 h-10 rounded-full object-contain">
                    </div>
                    <div class="font-bold text-gray-900">{{ $product->name }}</div>
                </div>
                <div class="flex items-center justify-end">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" 
                            wire:click="toggleProduct({{ $product->id }})"
                            @if(in_array($product->id, $selectedProductIds)) checked @endif
                            class="sr-only peer">
                        <div
                            class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-orange-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500">
                        </div>
                    </label>
                </div>
            </div>
        @empty
            <div class="text-center py-8 text-gray-500">
                No hay productos disponibles
            </div>
        @endforelse
    </div>
</div>

