🎵 playlist ${playlists.length - index}

${dateStr} • ${playlist.videos.length} video(s)

`.trim(); }).join(''); container.querySelectorAll('.delete-btn').forEach(btn => { btn.addEventListener('click', async (e) => { e.stopPropagation(); const id = parseInt(btn.dataset.id); playlists = playlists.filter(p => p.id !== id); await savePlaylists(); renderPlaylists(); }); }); container.querySelectorAll('.play-all-btn').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const id = parseInt(btn.dataset.id); playAllVideos(id); }); }); container.querySelectorAll('.toggle-btn').forEach(btn => { btn.addEventListener('click', (e) => { const index = parseInt(btn.dataset.index); const playlist = playlists[index]; const videoList = document.getElementById(`playlist-${playlist.id}`); videoList.classList.toggle('collapsed'); if (videoList.classList.contains('collapsed')) { btn.textContent = '▼ Show videos'; } else { btn.textContent = '▲ Hide videos'; } }); }); container.querySelectorAll('.remove-video-btn').forEach(btn => { btn.addEventListener('click', async (e) => { e.preventDefault(); e.stopPropagation(); const playlistId = parseInt(btn.dataset.playlistId); const videoIndex = parseInt(btn.dataset.videoIndex); await deleteVideo(playlistId, videoIndex); }); }); container.querySelectorAll('.video-list').forEach(list => { const playlistId = parseInt(list.dataset.playlistId); new window.sortablejs.create(list, { animation: 150, handle: '.drag-handle', ghostClass: 'sortable-ghost', dragClass: 'sortable-drag', onEnd: async (evt) => { const playlist = playlists.find(p => p.id === playlistId); if (!playlist) return; const [movedVideo] = playlist.videos.splice(evt.oldIndex, 1); playlist.videos.splice(evt.newIndex, 0, movedVideo); await savePlaylists(); renderPlaylists(); } }); }); }