@forelse($courses as $i => $course)
<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">
        {{ $courses->firstItem() + $i }}
    </td>

    {{-- Title --}}
    <td class="px-4 py-3">
        <div class="flex items-center gap-2">
            @if($course->featured_image)
                <img src="{{ asset('storage/' . $course->featured_image) }}"
                     alt="{{ $course->title }}"
                     class="w-8 h-8 rounded-lg object-cover flex-shrink-0">
            @else
                <span class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-book text-indigo-500 text-xs"></i>
                </span>
            @endif
            <div>
                <p class="font-semibold text-gray-800 text-sm leading-tight">{{ $course->title }}</p>
                <p class="text-gray-400 text-xs mt-0.5 line-clamp-1">{{ Str::limit($course->description, 60) }}</p>
            </div>
        </div>
    </td>

    {{-- Category --}}
    <td class="px-4 py-3">
        @if($course->category)
            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                @if($course->category->icon)
                    <i class="{{ $course->category->icon }} text-xs"></i>
                @endif
                {{ $course->category->name }}
            </span>
        @else
            <span class="text-gray-300 text-xs">—</span>
        @endif
    </td>

    {{-- Status --}}
    <td class="px-4 py-3">
        @php
            $statusMap = [
                'published' => ['bg-green-100 text-green-700', 'fa-circle-check'],
                'draft'     => ['bg-amber-100 text-amber-700', 'fa-pencil'],
                'archived'  => ['bg-gray-100 text-gray-500',  'fa-archive'],
            ];
            [$statusClass, $statusIcon] = $statusMap[$course->status] ?? ['bg-gray-100 text-gray-500', 'fa-circle'];
        @endphp
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium {{ $statusClass }}">
            <i class="fas {{ $statusIcon }} text-xs"></i>
            {{ ucfirst($course->status) }}
        </span>
    </td>

    {{-- Fee --}}
    <td class="px-4 py-3">
        @if($course->isFree())
            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
                <i class="fas fa-gift text-xs"></i> Free
            </span>
        @else
            <span class="text-gray-700 text-xs font-medium">
                {{ $course->currency }} {{ number_format($course->fee_amount) }}
            </span>
        @endif
    </td>

    {{-- Enrollments --}}
    <td class="px-4 py-3">
        <span class="inline-flex items-center gap-1 text-xs font-medium text-rose-700">
            <i class="fas fa-users text-rose-400"></i>
            {{ number_format($course->enrollments_count) }}
        </span>
    </td>

    {{-- Topics --}}
    <td class="px-4 py-3">
        <span class="inline-flex items-center gap-1 text-xs font-medium text-teal-700">
            <i class="fas fa-list-ul text-teal-400"></i>
            {{ number_format($course->topics_count) }}
        </span>
    </td>

    {{-- Actions --}}
    <td class="px-4 py-3">
        <div class="flex items-center gap-1">
            @can('view self-paced courses')
            <a href="{{ route('self-paced.dashboard.courses.show', $course) }}"
               title="Manage Course"
               class="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition">
                <i class="fas fa-cog text-xs"></i> Manage
            </a>
            @endcan
            @can('edit self-paced courses')
            <a href="{{ route('self-paced.dashboard.courses.edit', $course) }}"
               title="Edit"
               class="w-7 h-7 flex items-center justify-center rounded-lg bg-amber-50 hover:bg-amber-100 text-amber-600 transition">
                <i class="fas fa-pencil text-xs"></i>
            </a>
            @endcan
            @can('delete self-paced courses')
            <button type="button"
                    title="Delete"
                    onclick="confirmDelete({{ $course->id }}, '{{ addslashes($course->title) }}')"
                    class="w-7 h-7 flex items-center justify-center rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition">
                <i class="fas fa-trash text-xs"></i>
            </button>
            <form id="delete-form-{{ $course->id }}"
                  action="{{ route('self-paced.dashboard.courses.destroy', $course) }}"
                  method="POST" class="hidden">
                @csrf @method('DELETE')
            </form>
            @endcan
        </div>
    </td>
</tr>
@empty
<tr>
    <td colspan="8" class="px-6 py-16 text-center">
        <i class="fas fa-book-open text-5xl text-gray-200 mb-4 block"></i>
        <p class="text-gray-400 font-medium">No courses found</p>
        <p class="text-gray-300 text-sm mt-1">Try adjusting your search or filters.</p>
    </td>
</tr>
@endforelse
