updated upload page

app/templates/content/manage_playlist_content.html

@@ -191,12 +191,20 @@
     
     <div class="content-grid">
         <div class="card">
-            <h2 style="margin-bottom: 20px;">📋 Playlist Content (Drag to Reorder)</h2>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                <h2 style="margin: 0;">📋 Playlist Content (Drag to Reorder)</h2>
+                <button id="bulk-delete-btn" class="btn btn-danger" style="display: none;" onclick="bulkDeleteSelected()">
+                    🗑️ Delete Selected (<span id="selected-count">0</span>)
+                </button>
+            </div>
             
             {% if playlist_content %}
             <table class="playlist-table" id="playlist-table">
                 <thead>
                     <tr>
+                        <th style="width: 40px;">
+                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" title="Select all">
+                        </th>
                         <th style="width: 40px;"></th>
                         <th style="width: 50px;">#</th>
                         <th>Filename</th>
@@ -209,6 +217,9 @@
                 <tbody id="playlist-tbody">
                     {% for content in playlist_content %}
                     <tr class="draggable-row" draggable="true" data-content-id="{{ content.id }}">
+                        <td>
+                            <input type="checkbox" class="content-checkbox" data-content-id="{{ content.id }}" onchange="updateBulkDeleteButton()">
+                        </td>
                         <td><span class="drag-handle">⋮⋮</span></td>
                         <td>{{ loop.index }}</td>
                         <td>{{ content.filename }}</td>
@@ -415,6 +426,82 @@ function toggleAudio(contentId, enabled) {
         if (checkbox) checkbox.checked = !enabled;
     });
 }
+
+function toggleSelectAll(checkbox) {
+    const checkboxes = document.querySelectorAll('.content-checkbox');
+    checkboxes.forEach(cb => {
+        cb.checked = checkbox.checked;
+    });
+    updateBulkDeleteButton();
+}
+
+function updateBulkDeleteButton() {
+    const checkboxes = document.querySelectorAll('.content-checkbox:checked');
+    const count = checkboxes.length;
+    const bulkDeleteBtn = document.getElementById('bulk-delete-btn');
+    const selectedCount = document.getElementById('selected-count');
+    
+    if (count > 0) {
+        bulkDeleteBtn.style.display = 'block';
+        selectedCount.textContent = count;
+    } else {
+        bulkDeleteBtn.style.display = 'none';
+    }
+    
+    // Update select-all checkbox state
+    const allCheckboxes = document.querySelectorAll('.content-checkbox');
+    const selectAllCheckbox = document.getElementById('select-all');
+    if (selectAllCheckbox) {
+        selectAllCheckbox.checked = allCheckboxes.length > 0 && count === allCheckboxes.length;
+        selectAllCheckbox.indeterminate = count > 0 && count < allCheckboxes.length;
+    }
+}
+
+function bulkDeleteSelected() {
+    const checkboxes = document.querySelectorAll('.content-checkbox:checked');
+    const contentIds = Array.from(checkboxes).map(cb => parseInt(cb.dataset.contentId));
+    
+    if (contentIds.length === 0) {
+        alert('No items selected');
+        return;
+    }
+    
+    const confirmMsg = `Are you sure you want to remove ${contentIds.length} item(s) from this playlist?`;
+    if (!confirm(confirmMsg)) {
+        return;
+    }
+    
+    // Show loading state
+    const bulkDeleteBtn = document.getElementById('bulk-delete-btn');
+    const originalText = bulkDeleteBtn.innerHTML;
+    bulkDeleteBtn.disabled = true;
+    bulkDeleteBtn.innerHTML = '⏳ Removing...';
+    
+    fetch('{{ url_for("content.bulk_remove_from_playlist", playlist_id=playlist.id) }}', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ content_ids: contentIds })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Reload page to show updated playlist
+            window.location.reload();
+        } else {
+            alert('Error removing items: ' + data.message);
+            bulkDeleteBtn.disabled = false;
+            bulkDeleteBtn.innerHTML = originalText;
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Error removing items from playlist');
+        bulkDeleteBtn.disabled = false;
+        bulkDeleteBtn.innerHTML = originalText;
+    });
+}
 </script>
 
 {% endblock %}