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

    {{-- Title --}}
    <td class="px-4 py-3">
        <div>
            <p class="font-semibold text-gray-800 text-sm leading-tight">{{ $topic->title }}</p>
            @if($topic->description)
                <p class="text-gray-400 text-xs mt-0.5 line-clamp-1">{{ Str::limit($topic->description, 70) }}</p>
            @endif
        </div>
    </td>

    {{-- Subtopics Count --}}
    <td class="px-4 py-3">
        <span class="inline-flex items-center gap-1 text-xs font-medium text-blue-700">
            <i class="fas fa-layer-group text-blue-400"></i>
            {{ $topic->subtopics_count ?? $topic->subtopics->count() }}
        </span>
    </td>

    {{-- Published --}}
    <td class="px-4 py-3">
        @if($topic->is_published)
            <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-eye text-xs"></i> Published
            </span>
        @else
            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
                <i class="fas fa-eye-slash text-xs"></i> Hidden
            </span>
        @endif
    </td>

    {{-- Sort Order --}}
    <td class="px-4 py-3">
        <span class="inline-flex items-center gap-1 text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">
            <i class="fas fa-sort text-amber-400"></i>
            {{ $topic->sort_order }}
        </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.topics.show', [$course, $topic]) }}"
               title="View"
               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>
            @endcan
            @can('edit self-paced courses')
            <a href="{{ route('self-paced.dashboard.courses.topics.edit', [$course, $topic]) }}"
               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="confirmTopicDelete({{ $topic->id }}, '{{ addslashes($topic->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-topic-form-{{ $topic->id }}"
                  action="{{ route('self-paced.dashboard.courses.topics.destroy', [$course, $topic]) }}"
                  method="POST" class="hidden">
                @csrf @method('DELETE')
            </form>
            @endcan
        </div>
    </td>
</tr>
@empty
<tr>
    <td colspan="6" class="px-6 py-16 text-center">
        <i class="fas fa-list-ul text-5xl text-gray-200 mb-4 block"></i>
        <p class="text-gray-400 font-medium">No topics found</p>
        <p class="text-gray-300 text-sm mt-1">
            @if(isset($search) && $search)
                Try adjusting your search.
            @else
                Add the first topic to get started.
            @endif
        </p>
    </td>
</tr>
@endforelse
