@extends('layouts.app')

@section('title', 'Team')
@section('heading', 'Team')

@section('content')
    <div class="flex-between mb-1">
        <p class="mb-0" style="font-size:0.9rem;color:var(--muted)">People in your workspace.</p>
        @can('create', App\Models\User::class)
            <a href="{{ route('team.create') }}" class="btn btn-primary">Add member</a>
        @endcan
    </div>

    <div class="table-wrap">
        <table class="data-table">
            <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            @forelse ($members as $member)
                <tr>
                    <td>{{ $member->name }}</td>
                    <td>{{ $member->email }}</td>
                    <td>
                        @foreach ($member->roles as $role)
                            <span class="badge">{{ $role->name }}</span>
                        @endforeach
                        @if ($member->roles->isEmpty())
                            <span class="badge">—</span>
                        @endif
                    </td>
                    <td class="flex gap" style="justify-content:flex-end;flex-wrap:wrap">
                        @can('update', $member)
                            <a href="{{ route('team.edit', $member) }}" class="btn btn-ghost btn-sm">Edit</a>
                        @endcan
                        @can('delete', $member)
                            <form method="POST" action="{{ route('team.destroy', $member) }}" onsubmit="return confirm('Remove this member?');" class="mb-0">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Remove</button>
                            </form>
                        @endcan
                    </td>
                </tr>
            @empty
                <tr><td colspan="4">No team members.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
@endsection