<x-app-layout><x-slot name="header"><div class="flex flex-wrap items-center justify-between gap-4"><div><h1 class="text-2xl font-bold">Members</h1><p class="text-sm text-slate-500">Your contributor directory.</p></div><a href="{{ route('members.create') }}" class="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white">Add member</a></div></x-slot>
<div class="mx-auto max-w-7xl space-y-4 px-4 py-8 sm:px-6 lg:px-8">@if(session('status'))<div class="rounded-xl bg-emerald-50 p-3 text-sm text-emerald-700">{{ session('status') }}</div>@endif<form><input name="search" value="{{ request('search') }}" placeholder="Search name, phone or member number…" class="w-full max-w-md rounded-xl border-slate-300 bg-white dark:border-slate-700 dark:bg-slate-900"></form><div class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900"><div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead class="bg-slate-50 text-xs uppercase text-slate-500 dark:bg-slate-800"><tr><th class="p-4">Member</th><th class="p-4">Phone</th><th class="p-4">Groups</th><th class="p-4">Status</th><th></th></tr></thead><tbody class="divide-y divide-slate-100 dark:divide-slate-800">@forelse($members as $member)<tr><td class="p-4"><p class="font-medium">{{ $member->full_name }}</p><p class="text-xs text-slate-500">{{ $member->member_number }}</p></td><td class="p-4">{{ $member->phone }}</td><td class="p-4">{{ $member->groups_count }}</td><td class="p-4"><span class="rounded-full px-2 py-1 text-xs {{ $member->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">{{ $member->is_active ? 'Active' : 'Inactive' }}</span></td><td class="p-4 text-right"><a href="{{ route('members.edit',$member) }}" class="text-emerald-600 hover:underline">Edit</a></td></tr>@empty<tr><td colspan="5" class="p-12 text-center text-slate-500">No members found.</td></tr>@endforelse</tbody></table></div></div>{{ $members->links() }}</div></x-app-layout>
