{{-- 테넌트 모달 - 역할 탭 --}}
<div class="space-y-4">
    {{-- 헤더 --}}
    <div class="flex items-center justify-between">
        <h3 class="text-sm font-medium text-gray-700">역할 목록</h3>
        <span class="text-xs text-gray-500">총 {{ $roles->count() }}개</span>
    </div>

    @if($roles->count() > 0)
        {{-- 역할 카드 그리드 --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            @foreach($roles as $role)
                <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h4 class="text-sm font-medium text-gray-900">{{ $role->name }}</h4>
                            @if($role->description)
                                <p class="mt-1 text-xs text-gray-500">{{ $role->description }}</p>
                            @endif
                        </div>
                        <div class="ml-4">
                            @if($role->is_system ?? false)
                                <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
                                    시스템
                                </span>
                            @else
                                <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                    사용자 정의
                                </span>
                            @endif
                        </div>
                    </div>

                    {{-- 역할 통계 --}}
                    <div class="mt-3 flex items-center gap-4 text-xs text-gray-500">
                        <span class="flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                            {{ $role->users_count ?? 0 }}명
                        </span>
                        <span class="flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                            {{ $role->permissions_count ?? 0 }}개 권한
                        </span>
                    </div>

                    {{-- 주요 권한 미리보기 --}}
                    @if(isset($role->permissions) && $role->permissions->count() > 0)
                        <div class="mt-3 flex flex-wrap gap-1">
                            @foreach($role->permissions->take(3) as $permission)
                                <span class="px-1.5 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
                                    {{ $permission->name }}
                                </span>
                            @endforeach
                            @if($role->permissions->count() > 3)
                                <span class="px-1.5 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
                                    +{{ $role->permissions->count() - 3 }}
                                </span>
                            @endif
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    @else
        {{-- 빈 상태 --}}
        <div class="text-center py-8 text-gray-500">
            <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            <p>등록된 역할이 없습니다.</p>
        </div>
    @endif
</div>