@foreach($list_items as $index => $item)
<tr>
    <td>
        <input type="checkbox" name="bulk_ids[]" value="{{ $item->id }}" class="form-check-input bulk-checkbox">
    </td>
    <td>{{ $index + 1 }}</td>
    <td>
        <div class="d-flex align-items-center">
            <div class="flex-shrink-0 position-relative">
                @if($item->material->thumbnail)
                    <div class="position-relative" style="width: 80px; height: 60px; cursor: pointer;" 
                         onclick="showVideoModal('{{ $item->material->title }}', '{{ $item->getDirectVideoUrl() }}')">
                        <img src="{{ $item->material->thumbnail_url }}" alt="Video thumbnail" 
                             class="rounded w-100 h-100" style="object-fit: cover;">
                        <!-- Play Icon Overlay -->
                        <div class="position-absolute top-50 start-50 translate-middle">
                            <div class="bg-dark bg-opacity-75 rounded-circle d-flex align-items-center justify-content-center" 
                                 style="width: 40px; height: 40px;">
                                <i class="mdi mdi-play text-white" style="font-size: 20px; margin-left: 2px;"></i>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="bg-light rounded d-flex align-items-center justify-content-center position-relative" 
                         style="width: 80px; height: 60px; cursor: pointer;"
                         onclick="showVideoModal('{{ $item->material->title }}', '{{ $item->getDirectVideoUrl() }}')">
                        <i class="{{ $item->provider_icon }} text-muted"></i>
                        <!-- Play Icon Overlay -->
                        <div class="position-absolute top-50 start-50 translate-middle">
                            <div class="bg-dark bg-opacity-75 rounded-circle d-flex align-items-center justify-content-center" 
                                 style="width: 40px; height: 40px;">
                                <i class="mdi mdi-play text-white" style="font-size: 20px; margin-left: 2px;"></i>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <div class="flex-grow-1 ms-3">
                <h6 class="mb-1">{{ $item->material->title ?? 'N/A' }}</h6>
                <small class="text-muted">{{ Str::limit($item->provider_id, 50) }}</small>
            </div>
        </div>
    </td>
    <td>
        <span class="badge border border-success text-success">
            {{ $item->provider_label }}
        </span>
    </td>
    <td>
        @if($item->duration)
            <span class="text-muted">{{ $item->duration_formatted }} mins</span>
        @else
            <span class="text-muted">Unknown</span>
        @endif
    </td>
    <td>
        <small class="text-muted">{{ $item->created_at->format('M d, Y') }}</small>
    </td>
    <td>
        @include('admin.crud.action-dropdown', [
            'editUrl' => route('admin.videos.edit', $item->id),
            'showUrl' => route('admin.videos.show', $item->id),
            'deleteUrl' => route('admin.videos.destroy', $item->id),
            'itemId' => $item->id,
            'itemName' => 'Video'
        ])
    </td>
</tr>
@endforeach