<!--[if BLOCK]><![endif]--><?php if(!empty($continueWatching)): ?>
<div class="px-6 lg:px-8 mb-8">
    <h2 class="text-white text-xl mb-4 flex items-center">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M8 5v10l7-5z"/>
        </svg>
        Continue Watching
    </h2>
    
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
        <!--[if BLOCK]><![endif]--><?php $__currentLoopData = $continueWatching; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="relative group">
                <a href="<?php echo e($item['episode_url']); ?>" class="block relative">
                    <!-- Drama Cover with Progress -->
                    <div class="relative">
                        <img src="<?php echo e($item['book_cover'] ?? asset('og.png')); ?>" 
                             alt="<?php echo e($item['book_name']); ?>" 
                             class="w-full h-48 sm:h-56 object-cover rounded-lg bg-gray-800 transition-transform duration-200 group-hover:scale-105">
                        
                        <!-- Progress Bar -->
                        <!--[if BLOCK]><![endif]--><?php if($item['progress_percentage'] > 0): ?>
                            <div class="absolute bottom-0 left-0 right-0 bg-gray-900/80 px-2 py-1 rounded-b-lg">
                                <div class="w-full bg-gray-700 rounded-full h-1.5">
                                    <div class="bg-blue-500 h-1.5 rounded-full transition-all duration-300" 
                                         style="width: <?php echo e(min($item['progress_percentage'], 100)); ?>%"></div>
                                </div>
                                <div class="text-xs text-gray-300 mt-1">
                                    Episode <?php echo e($item['last_episode_index']); ?>

                                    <!--[if BLOCK]><![endif]--><?php if($item['total_episodes']): ?>
                                        / <?php echo e($item['total_episodes']); ?>

                                    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                                </div>
                            </div>
                        <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                        
                        <!-- Continue Icon -->
                        <div class="absolute top-2 right-2 bg-blue-600 text-white p-1.5 rounded-full opacity-90">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M8 5v10l7-5z"/>
                            </svg>
                        </div>
                    </div>
                    
                    <!-- Drama Info -->
                    <div class="mt-2">
                        <h3 class="text-white text-sm font-medium line-clamp-2 group-hover:text-blue-300 transition-colors">
                            <?php echo e($item['book_name']); ?>

                        </h3>
                        
                        <!--[if BLOCK]><![endif]--><?php if($item['last_episode_title']): ?>
                            <p class="text-gray-400 text-xs mt-1 line-clamp-1">
                                <?php echo e($item['last_episode_title']); ?>

                            </p>
                        <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                        
                        <p class="text-gray-500 text-xs mt-1">
                            <?php echo e($item['last_watched_human']); ?>

                        </p>
                    </div>
                </a>
                
                <!-- Quick Actions on Hover -->
                <div class="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <div class="flex space-x-1">
                        <!-- Drama Detail Link -->
                        <a href="<?php echo e(route('drama.detail', ['lang' => app()->getLocale(), 'bookId' => $item['book_id']])); ?>" 
                           class="bg-gray-800/90 text-white p-1.5 rounded-full hover:bg-gray-700 transition-colors"
                           title="Drama Details">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
    </div>
</div>
<?php endif; ?><!--[if ENDBLOCK]><![endif]--><?php /**PATH /Users/buchin/Repos/dracin-git/resources/views/components/continue-watching.blade.php ENDPATH**/ ?>