<div>
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-base font-semibold text-gray-800">{{ __('المستندات') }}</h3>
        @can('documents.upload')
            <a href="{{ route('documents.upload', ['documentableType' => 'participant', 'documentableId' => $participant->id]) }}" wire:navigate
               class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-xs font-medium">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                {{ __('رفع مستند') }}
            </a>
        @endcan
    </div>

    @if($documents->isEmpty())
        <div class="text-center py-8 text-gray-400 text-sm">{{ __('لا توجد مستندات مرفوعة') }}</div>
    @else
        <div class="space-y-2">
            @foreach($documents as $doc)
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
                    <div class="flex items-center gap-3 min-w-0">
                        <div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        </div>
                        <div class="min-w-0">
                            <p class="text-sm font-medium text-gray-800 truncate">{{ $doc->document_type->label() }}</p>
                            <p class="text-xs text-gray-500 truncate" dir="ltr">{{ $doc->original_filename }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium
                            {{ match($doc->status->badgeColor()) { 'yellow' => 'bg-yellow-100 text-yellow-700', 'green' => 'bg-green-100 text-green-700', 'red' => 'bg-red-100 text-red-700', default => 'bg-gray-100 text-gray-700' } }}">
                            {{ $doc->status->label() }}
                        </span>
                        @if($doc->expires_at)
                            <span class="text-[10px] text-gray-400" dir="ltr">{{ $doc->expires_at->format('Y-m-d') }}</span>
                        @endif
                        <a href="{{ route('documents.view', $doc) }}" target="_blank" class="text-blue-600 hover:text-blue-800">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </a>
                        @can('documents.delete')
                            <button wire:click="delete('{{ $doc->uuid }}')" wire:confirm="{{ __('هل أنت متأكد من حذف هذا المستند؟') }}"
                                    class="text-red-500 hover:text-red-700">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        @endcan
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
