@forelse($certificates as $i => $certificate)
<tr class="odd:bg-white even:bg-gray-50 hover:bg-indigo-50/60 transition-colors border-b border-gray-100 last:border-0">

    {{-- # --}}
    <td class="px-4 py-3 text-gray-400 text-xs font-medium">
        {{ $certificates->firstItem() + $i }}
    </td>

    {{-- Certificate # --}}
    <td class="px-4 py-3">
        <span class="font-mono text-xs font-semibold text-purple-700 bg-purple-50 px-2 py-0.5 rounded">
            {{ $certificate->certificate_number }}
        </span>
    </td>

    {{-- Holder --}}
    <td class="px-4 py-3">
        <div class="flex items-center gap-2">
            <span class="w-7 h-7 bg-blue-100 rounded-full flex items-center justify-center text-xs font-bold text-blue-600 flex-shrink-0">
                {{ strtoupper(substr($certificate->user->name ?? 'U', 0, 1)) }}
            </span>
            <div>
                <p class="font-semibold text-gray-800 text-sm leading-tight">{{ $certificate->user->name ?? '—' }}</p>
                <p class="text-gray-400 text-xs mt-0.5">{{ $certificate->user->email ?? '—' }}</p>
            </div>
        </div>
    </td>

    {{-- Course --}}
    <td class="px-4 py-3">
        <p class="text-sm font-medium text-gray-700 line-clamp-1">{{ $certificate->course->title ?? '—' }}</p>
    </td>

    {{-- Issue Date --}}
    <td class="px-4 py-3">
        <span class="text-xs text-gray-600">{{ $certificate->issue_date?->format('d M Y') ?? '—' }}</span>
    </td>

    {{-- Status badge --}}
    <td class="px-4 py-3">
        @if($certificate->is_revoked)
            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                <i class="fas fa-ban text-xs"></i> Revoked
            </span>
        @else
            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                <i class="fas fa-check-circle text-xs"></i> Valid
            </span>
        @endif
    </td>

    {{-- Verifications --}}
    <td class="px-4 py-3">
        <span class="inline-flex items-center gap-1 text-xs font-semibold text-rose-600 bg-rose-50 px-2 py-0.5 rounded-full">
            <i class="fas fa-eye text-xs"></i> {{ $certificate->verification_count }}
        </span>
    </td>

    {{-- Actions --}}
    <td class="px-4 py-3">
        <div class="flex items-center gap-1">
            @can('manage self-paced certificates')
            <a href="{{ route('self-paced.dashboard.certificates.show', $certificate) }}"
               title="View Details"
               class="w-7 h-7 flex items-center justify-center rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-600 transition">
                <i class="fas fa-eye text-xs"></i>
            </a>
            <a href="{{ route('self-paced.dashboard.certificates.download', $certificate) }}"
               title="Download PDF"
               class="w-7 h-7 flex items-center justify-center rounded-lg bg-teal-50 hover:bg-teal-100 text-teal-600 transition">
                <i class="fas fa-download text-xs"></i>
            </a>
            @if(!$certificate->is_revoked)
            <button type="button"
                    title="Revoke Certificate"
                    @click="openRevokeModal({{ $certificate->id }}, '{{ $certificate->certificate_number }}')"
                    class="w-7 h-7 flex items-center justify-center rounded-lg bg-red-50 hover:bg-red-100 text-red-500 transition">
                <i class="fas fa-ban text-xs"></i>
            </button>
            @endif
            @endcan
        </div>
    </td>
</tr>
@empty
<tr>
    <td colspan="8" class="px-6 py-16 text-center">
        <i class="fas fa-certificate text-5xl text-gray-200 mb-4 block"></i>
        <p class="text-gray-400 font-medium">No certificates found</p>
        <p class="text-gray-300 text-sm mt-1">Try adjusting your search or filters.</p>
    </td>
</tr>
@endforelse
