<div class="space-y-5">
    <header>
        <h1 class="text-xl font-bold text-gray-900">{{ __('تسجيلات في انتظار المراجعة') }}</h1>
        <p class="mt-0.5 text-sm text-gray-500">
            {{ __('أعضاء سجّلوا أنفسهم عبر البوابة. راجع المطابقات المحتملة قبل الاعتماد حتى لا يُنشأ ملف ثانٍ لعضو قائم.') }}
        </p>
    </header>

    @forelse($pending as $participant)
        <article class="rounded-xl border border-gray-200 bg-white p-4">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div class="min-w-0">
                    <p class="font-bold text-gray-900">{{ $participant->person?->name_ar }}</p>
                    <p class="text-xs text-gray-500">
                        {{ $participant->person?->date_of_birth?->translatedFormat('j M Y') }}
                        @if($participant->branch) · {{ $participant->branch->name_ar ?? $participant->branch->name }} @endif
                        · {{ __('سجّل') }} {{ $participant->created_at?->diffForHumans() }}
                    </p>
                    @if($participant->guardians->isNotEmpty())
                        <p class="mt-1 text-xs text-gray-600">
                            {{ __('ولي الأمر') }}:
                            {{ $participant->guardians->first()?->person?->name_ar }}
                            <span class="font-mono" dir="ltr">{{ $participant->guardians->first()?->person?->phone }}</span>
                        </p>
                    @endif
                </div>

                <div class="flex gap-2">
                    <button type="button" wire:click="approve({{ $participant->id }})"
                            class="rounded-lg bg-emerald-600 px-4 py-2 text-xs font-bold text-white hover:bg-emerald-700">
                        {{ __('اعتماد') }}
                    </button>
                    <button type="button" wire:click="reject({{ $participant->id }})"
                            class="rounded-lg border border-red-300 px-4 py-2 text-xs font-bold text-red-700 hover:bg-red-50">
                        {{ __('رفض') }}
                    </button>
                </div>
            </div>

            @if(!empty($participant->duplicate_candidates))
                {{-- The findings DuplicateDetectionService has always produced
                     and nothing ever showed anyone. --}}
                <div class="mt-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2">
                    <p class="text-xs font-bold text-amber-900">{{ __('قد يكون عضواً قائماً بالفعل:') }}</p>
                    <ul class="mt-1 space-y-0.5">
                        @foreach($participant->duplicate_candidates as $candidate)
                            <li class="text-xs text-amber-800">• {{ $candidate['name'] ?? '—' }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </article>
    @empty
        <div class="rounded-xl border border-gray-200 bg-white px-4 py-12 text-center">
            <p class="font-semibold text-gray-900">{{ __('لا توجد تسجيلات في الانتظار') }}</p>
        </div>
    @endforelse

    <div>{{ $pending->links() }}</div>
</div>
