@extends('layouts.user')

@section('title', 'Groups')

@section('content')
<div class="max-w-3xl mx-auto px-4 py-6">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-lg font-semibold text-slate-900">Groups</h1>
        <a href="{{ route('nurseconnect.groups.create') }}" class="btn btn-brand">+ Create</a>
    </div>

    <div class="space-y-3">
        @forelse($groups as $group)
            @php
                $membership = $group->memberships->first();
            @endphp
            <a href="{{ route('nurseconnect.groups.show', $group) }}" class="block bg-white rounded-md border border-gray-100 px-5 py-4 text-sm hover:border-slate-200">
                <div class="flex items-start justify-between gap-2">
                    <div class="min-w-0">
                        <p class="text-xs text-slate-500">Group</p>
                        <h2 class="text-base font-semibold text-slate-900">{{ $group->name }}</h2>
                        <p class="text-xs text-slate-600">Privacy: {{ ucfirst($group->privacy) }}</p>
                    </div>
                    <span class="text-xs text-slate-500 whitespace-nowrap">{{ $group->created_at?->diffForHumans() }}</span>
                </div>
                @if($group->description)
                    <p class="mt-2 text-sm text-slate-700">{{ $group->description }}</p>
                @endif
                <div class="mt-3 flex flex-wrap gap-3 text-xs text-slate-600">
                    <span>{{ $group->memberships_count ?? 0 }} members</span>
                    @if($membership?->status === 'approved')
                        <span class="text-emerald-600 font-semibold">Member</span>
                    @elseif($membership?->status === 'pending')
                        <span class="text-amber-600 font-semibold">Pending</span>
                    @endif
                </div>
            </a>
        @empty
            <div class="bg-white rounded-md border border-gray-100 px-5 py-4 text-sm text-slate-600">
                No groups available yet.
            </div>
        @endforelse
    </div>

    <div class="mt-4">
        {{ $groups->links() }}
    </div>
</div>
@endsection