<ul class="flex flex-col gap-1 {{ $isFirst ? 'firstList' : 'pl-5 border-l-2 border-primary-100 ml-3 mt-1' }}">
    @foreach ($user->allReferees as $under)
        @if ($loop->first)
            @php $layer++ @endphp
        @endif
        <li class="flex flex-col">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-primary-50 border border-primary-100 hover:bg-primary-100 hover:border-primary-300 transition-colors duration-150 w-fit">
                <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-800 text-white text-xs font-bold shrink-0">
                    {{ strtoupper(substr($under->username, 0, 1)) }}
                </span>
                <span class="text-sm font-medium text-primary-800">{{ $under->username }}</span>
                @if ($under->allReferees->count() > 0 && $layer < $maxLevel)
                    <span class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-primary-200 text-primary-600 text-xs font-bold shrink-0">
                        {{ $under->allReferees->count() }}
                    </span>
                @endif
            </div>

            {{-- Recursive children --}}
            @if ($under->allReferees->count() > 0 && $layer < $maxLevel)
                @include($activeTemplate . 'partials.under_tree', [
                    'user'    => $under,
                    'layer'   => $layer,
                    'isFirst' => false,
                ])
            @endif
        </li>
    @endforeach
</ul>