@props(['network'])
<div
    class="my-1 bg-gray-100 dark:bg-bg rounded-xl flex flex-col space-y-3 md:space-y-5 h-[350px] w-full cursor-pointer hover:scale-105 duration-300 transition-all">
    <div class="relative w-full h-full">
        <img src="{{ asset('storage/' . $network->thumbnail) }}" alt=""
            class="absolute inset-0 object-cover w-full h-full rounded-xl" />
        <div
            class="absolute inset-0 p-3 mx-auto text-white md:p-5 bg-gradient-to-t from-secondary-dark to-transparent rounded-xl">
            <div class="flex flex-col items-center justify-between h-full space-x-3">
                <div class="flex items-start justify-between w-full">
                    <div class="flex items-center space-x-5 text-lg">
                        <x-item.btn-edit />
                        <x-item.btn-delete wire:click='delnet({{ $network->id }})' />
                    </div>

                    <div class="flex items-center p-3 bg-opacity-50 bg-secondary-dark rounded-xl">
                        <button wire:click="toggleStatus({{ $network->id }})"
                            class="w-9 h-5 flex items-center rounded-full p-1 cursor-pointer {{ $network->status === 'active' ? 'bg-green-500' : 'bg-gray-300' }}">
                            <div
                                class="w-4 h-4 bg-white rounded-full shadow-md transform {{ $network->status === 'active' ? 'translate-x-3.5' : '' }}">
                            </div>
                        </button>
                        <span
                            class="ml-3 text-sm {{ $network->status === 'active' ? 'text-green-500' : 'text-gray-300' }}">{{ $network->status === 'active' ? 'Active' : 'Inactive' }}</span>
                    </div>
                </div>

                <div class="flex items-center justify-between w-full">
                    <h6 class="font-normal text-left uppercase">{{ $network->name }}</h6>
                </div>
            </div>
        </div>
    </div>
</div>
