<div>
    @php $ws = current_workspace(); @endphp
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-t1">Team</h1>
            <p class="text-sm text-t2 mt-1">Manage workspace members and permissions</p>
        </div>
        @if($ws)
        <button
            @click="$dispatch('openModal', {component: 'modals.invite-member', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
            class="px-4 py-2 bg-accent-gradient text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
            + Invite Member
        </button>
        @endif
    </div>

    <div class="bg-s1 border border-white/[.06] rounded-xl overflow-hidden">
        <div class="px-5 py-3 border-b border-white/[.06] flex items-center justify-between">
            <span class="text-xs font-medium text-t2 uppercase tracking-wider">{{ $members->count() }} {{ Str::plural('member', $members->count()) }}</span>
        </div>

        <div class="divide-y divide-white/[.04]">
            @forelse($members as $member)
            <div class="flex items-center gap-4 px-5 py-4 group">
                {{-- Avatar --}}
                <div class="w-9 h-9 rounded-full bg-blue flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
                    {{ strtoupper(substr($member->user->name ?? $member->user->email, 0, 1)) }}
                </div>
                {{-- Info --}}
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-t1">{{ $member->user->name ?? '—' }}</div>
                    <div class="text-xs text-t2">{{ $member->user->email }}</div>
                </div>
                {{-- Role --}}
                <button
                    @if($member->role !== 'owner')
                    @click="$dispatch('openModal', {component: 'modals.edit-member-role', arguments: {memberId: {{ $member->id }}}})"
                    @endif
                    class="px-2.5 py-1 rounded-full text-xs font-medium transition-opacity
                        {{ $member->role === 'owner' ? 'bg-amber/10 text-amber cursor-default' : ($member->role === 'admin' ? 'bg-blue/10 text-blue hover:opacity-75 cursor-pointer' : 'bg-white/[.06] text-t2 hover:opacity-75 cursor-pointer') }}">
                    {{ ucfirst($member->role) }}
                </button>
                {{-- Remove --}}
                @if($member->role !== 'owner')
                <button
                    @click="$dispatch('openModal', {component: 'modals.remove-member', arguments: {memberId: {{ $member->id }}}})"
                    class="opacity-0 group-hover:opacity-100 text-t3 text-xs hover:text-red transition-all">
                    Remove
                </button>
                @endif
            </div>
            @empty
            <div class="px-5 py-12 text-center text-t3 text-sm">No team members yet</div>
            @endforelse
        </div>
    </div>
</div>
