@php
    $hasChildren = $category->children->count() > 0;
@endphp

<div class="category-item mb-2">
    <div class="d-flex align-items-center justify-content-between p-2 rounded category-toggle"
        data-id="{{ $category->id }}" data-name="{{ $category->name }}"
        style="cursor: pointer; {{ $level > 0 ? 'padding-left: ' . ($level * 20 + 10) . 'px !important;' : '' }}">
        <span class="small fw-{{ $level == 0 ? 'bold' : 'normal' }}">
            <i
                class="bi bi-folder{{ $hasChildren ? '-fill' : '' }} me-2 text-{{ $hasChildren ? 'warning' : 'primary' }}"></i>
            {{ $category->name }}
        </span>
        @if ($hasChildren)
            <span class="toggle-icon">
                <i class="fas fa-chevron-down small"></i>
            </span>
        @endif
    </div>

    @if ($hasChildren)
        <div id="category-{{ $category->id }}" class="category-children" style="display: none;">
            @foreach ($category->children as $child)
                @include('partials.category-item', ['category' => $child, 'level' => $level + 1])
            @endforeach
        </div>
    @endif
</div>