@extends('admin.layouts.app')

@section('page_title', 'Team')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <p class="text-sm text-slate-500">Team members shown on the About page.</p>
        <a href="{{ route('admin.team.create') }}" class="inline-flex items-center gap-2 rounded-full bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg> New member
        </a>
    </div>

    @if ($members->count())
        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @foreach ($members as $m)
                <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
                    <div class="relative aspect-4/5 bg-gradient-to-br {{ $m->gradient }}">
                        @if ($m->photoUrl())
                            <img src="{{ $m->photoUrl() }}" alt="{{ $m->name }}" class="h-full w-full object-cover">
                        @endif
                        @unless ($m->is_published)
                            <span class="absolute left-3 top-3 rounded-full bg-white/90 px-2 py-0.5 text-xs font-semibold text-slate-600">Hidden</span>
                        @endunless
                    </div>
                    <div class="p-4">
                        <p class="font-bold text-ink">{{ $m->name }}</p>
                        <p class="text-sm text-brand-600">{{ $m->role }}</p>
                        <div class="mt-4 flex items-center gap-2">
                            <a href="{{ route('admin.team.edit', $m) }}" class="flex-1 rounded-lg border border-slate-200 py-1.5 text-center text-xs font-semibold text-slate-600 hover:border-brand-300 hover:text-brand-700">Edit</a>
                            <form action="{{ route('admin.team.destroy', $m) }}" method="POST" onsubmit="return confirm('Delete this team member?')">
                                @csrf @method('DELETE')
                                <button class="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-500 hover:border-brand-300 hover:text-brand-700">Delete</button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mt-6">{{ $members->links() }}</div>
    @else
        <div class="rounded-2xl border border-slate-200 bg-white">
            <p class="px-6 py-16 text-center text-sm text-slate-400">No team members yet. <a href="{{ route('admin.team.create') }}" class="font-semibold text-brand-600">Add your first one</a>.</p>
        </div>
    @endif
@endsection
