@php
    $hasChildren = isset($item->children) && count($item->children) > 0;
    $isExpanded = isset($this->expanded[$item->sayfaid]) && $this->expanded[$item->sayfaid];
@endphp

<div class="tree-item border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors" 
     style="padding-left: {{ $level * 24 }}px;">
    <div class="flex items-center justify-between py-3 px-4">
        <div class="flex items-center space-x-3 flex-1 min-w-0">
            @if($hasChildren)
                <button wire:click="toggle({{ $item->sayfaid }})" 
                        class="flex-shrink-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition-colors">
                    <svg wire:loading.remove wire:target="toggle({{ $item->sayfaid }})" 
                         class="w-5 h-5" 
                         fill="none" 
                         stroke="currentColor" 
                         viewBox="0 0 24 24">
                        @if($isExpanded)
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        @else
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        @endif
                    </svg>
                    <svg wire:loading wire:target="toggle({{ $item->sayfaid }})" 
                         class="w-5 h-5 animate-spin" 
                         fill="none" 
                         stroke="currentColor" 
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                </button>
            @else
                <span class="w-5"></span>
            @endif

            <div class="flex items-center space-x-2 min-w-0 flex-1">
                <span class="font-medium text-gray-900 dark:text-gray-100 truncate">{{ $item->baslik }}</span>
                @if($item->seo_url)
                    <span class="text-xs text-gray-500 dark:text-gray-400 truncate">({{ $item->seo_url }})</span>
                @endif
            </div>
        </div>

        <div class="flex items-center space-x-3 flex-shrink-0">
            <span class="text-xs text-gray-400 dark:text-gray-500">Sıra: {{ $item->sira }}</span>
            
            @if($item->menu)
                <span class="px-2 py-1 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 rounded">Menüde</span>
            @else
                <span class="px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded">Gizli</span>
            @endif

            @if($item->durum)
                <span class="px-2 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 rounded">Aktif</span>
            @else
                <span class="px-2 py-1 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 rounded">Pasif</span>
            @endif

            <a href="{{ route('filament.admin.resources.sayfas.edit', $item->sayfaid) }}" 
               class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 hover:underline">
                Düzenle
            </a>
        </div>
    </div>

    @if($hasChildren && $isExpanded)
        <div class="overflow-hidden">
            @foreach($item->children as $child)
                @include('livewire.tree-item', ['item' => $child, 'level' => $level + 1])
            @endforeach
        </div>
    @endif
</div>