@if ($key > 0)
                    <x-table.row>
                        <x-table.cell class="text-left">
                            <span class="flex items-center">
                            @livewire('component.edit-field',['id'=>$key,'object'=>'ProductCategory','field'=>'name'], key(rand() * $key))
                            @if (isset($category['children']) && (count($category['children']) > 0))
                            <span class="relative flex items-center">
                                &nbsp;( {{ count($category['children']) }} 
                            </span>
                            <span class="relative flex items-center">
                                <x-icon.down /> )
                            </span>
                            @endif
                            </span>
                        </x-table.cell>
                        <x-table.cell>
                            @if(isset($category['description']))
                            {{ $category['description'] }}
                            @endif
                        </x-table.cell>
                        <x-table.cell class="w-32">
                            @livewire('component.edit-field',['id'=>$key,'object'=>'ProductCategory','field'=>'rank'], key(rand() * $key))
                        </x-table.cell>
                        <x-table.cell>
                            <x-icon.group>
                            <a class="group flex" wire:click="edit({{ $key }})" title="edit" alt="edit"><x-icon.edit /></a>
                            <a class="group flex" wire:click="delete({{ $key }})" title="Delete" alt="Delete"><x-icon.bin /></a>
                            </x-icon.group>
                        </x-table.cell>
                    </x-table.row>
                    @endif
                    
                    @if (isset($category['children']) && (count($category['children']) > 0))
                    <x-table.row >
                        <x-table.cell colspan="4" class="bg-green-100 border-b-2 border-t-2 border-green-500 border-dotted">
                            <x-table x-show="show" data-id="{{ $key }}" class="table-fixed w-full text-xs" >
                            <x-slot name="head">

                            <x-table.heading>Name</x-table.heading>
                            <x-table.heading>Description</x-table.heading>
                            <x-table.heading class="w-32">Ordering Number</x-table.heading>
                            <x-table.heading class="w-32" colspan="3">Action</x-table.heading>

                            </x-slot>
                            <x-slot name="body">
                            @foreach($category['children'] as $key => $category)
                               @include('livewire.item.category-grid')
                            @endforeach
                            </x-slot>

                            </x-table>
                        </x-table.cell>
                     </x-table.row>
                    @endif