@extends('admin.layout')
@section('title', 'Team')
@section('page-title', 'Manage Team')

@section('content')
<div class="flex items-center justify-between mb-6">
    <p class="text-gray-400 text-sm">{{ $members->count() }} members</p>
    <a href="{{ route('admin.team.create') }}" class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all flex items-center gap-2"><i class="fas fa-plus text-xs"></i> Add Member</a>
</div>
@if($members->count() > 0)
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        @foreach($members as $member)
            <div class="bg-gray-900 border border-gray-800 rounded-2xl p-5 text-center hover:border-gray-700 transition-all">
                <div class="w-16 h-16 mx-auto mb-3 rounded-full overflow-hidden bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
                    @if($member->photo)<img src="{{ Storage::url($member->photo) }}" class="w-full h-full object-cover">@else<span class="text-white text-xl font-bold">{{ substr($member->name,0,1) }}</span>@endif
                </div>
                <h3 class="text-white font-bold text-sm">{{ $member->name }}</h3>
                <p class="text-indigo-400 text-xs mb-3">{{ $member->role }}</p>
                <div class="flex items-center justify-center gap-1">
                    <a href="{{ route('admin.team.edit', $member) }}" class="w-7 h-7 bg-indigo-500/10 hover:bg-indigo-500 text-indigo-400 hover:text-white rounded-lg flex items-center justify-center transition-all text-xs"><i class="fas fa-edit"></i></a>
                    @include('admin.partials.delete-btn', ['route' => route('admin.team.destroy', $member)])
                </div>
            </div>
        @endforeach
    </div>
@else
    @include('admin.partials.empty-state', ['icon' => 'fas fa-users', 'title' => 'No Team Members', 'actionRoute' => route('admin.team.create'), 'actionText' => 'Add First Member'])
@endif
@endsection