@php use Illuminate\Database\Eloquent\Model; @endphp
@php use Filament\Facades\Filament; @endphp
@php use SolutionForest\FilamentTree\Components\Tree; @endphp
@props(['record', 'containerKey', 'tree', 'title' => null, 'icon' => null, 'description' => null])
@php
    /** @var $record Model */
    /** @var $containerKey string */
    /** @var $tree Tree */

    $recordKey = $tree->getRecordKey($record);
    $parentKey = $tree->getParentKey($record);

    $children = $record->children;

    foreach ($children as $key => $child) {
        if (!$child->canEdit()) {
            unset($children[$key]);
        }
    }

    $collapsed = $this->getNodeCollapsedState($record);

    $actions = $tree->getActions();
    
    $isRootItem = $parentKey == -1;
@endphp

<li class="filament-tree-row dd-item" 
    data-id="{{ $recordKey }}"
    data-parent-id="{{ $parentKey }}">
    <div wire:loading.remove.delay
        wire:target="{{ implode(',', Tree::LOADING_TARGETS) }}"
        @class([
            'rounded-lg h-10 mb-2 flex w-full items-center',
            'dd-handle border border-gray-300 dark:border-gray-700' => !$isRootItem,
            'border-2 !border-gray-900 dark:!border-gray-900' => $isRootItem,
        ])>
        @if (!$isRootItem)
            <button type="button" @class([
                'h-full flex items-center',
                'rounded-l-lg border-r rtl:rounded-l rtl:border-r-0 rtl:border-l px-px',
                'bg-gray-50 border-gray-300 dark:bg-white/5 dark:border-white/10',
            ])>
                <x-heroicon-m-ellipsis-vertical class="text-gray-400 dark:text-gray-500 w-4 h-4 -mr-2 rtl:mr-0 rtl:-ml-2"/>
                <x-heroicon-m-ellipsis-vertical class="text-gray-400 dark:text-gray-500 w-4 h-4"/>
            </button>
        @endif

        <div class="dd-content dd-nodrag flex gap-1">

            <x-filament-tree::tree.item-display 
                class="ml-1 rtl:mr-1"
                @class([
                    'font-medium text-blue-600 dark:text-blue-400' => !$isRootItem,
                    'text-gray-400 dark:text-gray-400' => $isRootItem
                ])
                :record="$record" :title="$title" :icon="$icon" :description="$description"
            />

            <div @class(['dd-item-btns', 'hidden' => !count($children), 'flex items-center justify-center pl-3'])>
                <button data-action="expand" @class(['hidden' => !$collapsed])>
                    <x-heroicon-o-chevron-down class="text-gray-400 w-4 h-4" />
                </button>
                <button data-action="collapse" @class(['hidden' => $collapsed])>
                    <x-heroicon-o-chevron-up class="text-gray-400 w-4 h-4" />
                </button>
            </div>
        </div>

        @if (count($actions))
            <div class="dd-nodrag ml-auto mr-4 rtl:ml-4 rtl:mr-auto">
                <x-filament-tree::actions :actions="$actions" :record="$record" />
            </div>
        @endif
    </div>
    @if (count($children))
        <x-filament-tree::tree.list :records="$children" :containerKey="$containerKey" :tree="$tree" :collapsed="$collapsed" />
    @endif
    <div class="rounded-lg border border-gray-300 mb-2 w-full px-4 py-4 animate-pulse hidden"
         wire:loading.class.remove.delay="hidden"
         wire:target="{{ implode(',', Tree::LOADING_TARGETS) }}">
        <div class="h-4 bg-gray-300 rounded-md"></div>
    </div>
</li>