@foreach ($groups as $group)
    <li
        class="px-5 py-[15px] group-data-[theme-color=violet]:hover:bg-slate-100 group-data-[theme-color=green]:hover:bg-green-50/50 group-data-[theme-color=red]:hover:bg-red-50/50 group-data-[theme-color=violet]:dark:hover:bg-zinc-600 group-data-[theme-color=green]:dark:hover:bg-zinc-600 group-data-[theme-color=red]:dark:hover:bg-zinc-600 transition-all ease-in-out rounded">
        <a href="{{ route('user.get.group',['uuid'=>$group->uuid]) }}">
            <div class="flex items-center">
                <div class="ltr:mr-5 rtl:ml-5">
                    <div
                        class="flex items-center justify-center rounded-full w-9 h-9 group-data-[theme-color=violet]:bg-violet-500/20 group-data-[theme-color=green]:bg-green-500/20 group-data-[theme-color=red]:bg-red-500/20">
                        <span
                            class="font-medium group-data-[theme-color=violet]:text-violet-500 group-data-[theme-color=green]:text-green-500 group-data-[theme-color=red]:text-red-500">
                            {{ \Illuminate\Support\Str::limit($group->name, 1, '') }}
                        </span>
                    </div>
                </div>
                <div class="flex-grow overflow-hidden">
                    <h5 class="mb-0 text-gray-700 truncate text-14 dark:text-gray-50">#{{ $group->name }} <span
                            class="rtl:float-left ltr:float-right px-1.5 py-0.5 text-red-500 rounded-full bg-red-500/20 text-11"></span>
                    </h5>
                </div>
            </div>
        </a>
    </li>
@endforeach