add scrobble removal

templates/song.gohtml

@@ -5,6 +5,7 @@
         {{.Song.Title}}
         {{if eq .LoggedInUsername .Username}}
         <button class="edit-btn" onclick="openEditModal()">Edit</button>
+        <button class="edit-btn" id="removeScrobblesBtn" onclick="toggleRemoveMode()">Remove</button>
         {{end}}
       </h1>
       {{if .ArtistNames}}
@@ -23,9 +24,16 @@
       </div>
   </div>
   <div class="history">
-    <h3>Scrobbles</h3>
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+      <h3>Scrobbles</h3>
+      <div id="removeControls" style="display: none;">
+        <button class="edit-btn" onclick="cancelRemoveMode()">Cancel</button>
+        <button class="edit-btn" onclick="deleteSelectedScrobbles()" style="background: #c44;">Delete Selected</button>
+      </div>
+    </div>
     <table>
       <tr>
+        <th class="remove-checkbox-col" style="display: none;"><input type="checkbox" id="selectAllCheckboxes"></th>
         <th>Artist</th>
         <th>Title</th>
         <th>Album</th>
@@ -34,6 +42,9 @@
       {{$username := .Username}}
       {{range .Times}}
       <tr>
+        <td class="remove-checkbox-col" style="display: none;">
+          <input type="checkbox" class="scrobble-checkbox" value="{{.Id}}">
+        </td>
         <td>
           {{- $artistNames := getArtistNames .ArtistIds}}
           {{- range $i, $name := $artistNames}}{{if $i}}, {{end}}<a href="/profile/{{$username}}/artist/{{urlquery $name}}">{{$name}}</a>{{end}}
@@ -68,4 +79,67 @@
     </div>
   </div>
   {{end}}
+
+  <script>
+  function toggleRemoveMode() {
+    var checkboxes = document.querySelectorAll('.remove-checkbox-col');
+    checkboxes.forEach(function(col) {
+      col.style.display = '';
+    });
+    document.getElementById('removeScrobblesBtn').style.display = 'none';
+    document.getElementById('removeControls').style.display = '';
+    
+    var selectAll = document.getElementById('selectAllCheckboxes');
+    selectAll.addEventListener('change', function() {
+      document.querySelectorAll('.scrobble-checkbox').forEach(function(cb) {
+        cb.checked = selectAll.checked;
+      });
+    });
+  }
+  
+  function cancelRemoveMode() {
+    var checkboxes = document.querySelectorAll('.remove-checkbox-col');
+    checkboxes.forEach(function(col) {
+      col.style.display = 'none';
+    });
+    document.getElementById('removeScrobblesBtn').style.display = '';
+    document.getElementById('removeControls').style.display = 'none';
+    
+    document.querySelectorAll('.scrobble-checkbox').forEach(function(cb) {
+      cb.checked = false;
+    });
+    document.getElementById('selectAllCheckboxes').checked = false;
+  }
+  
+  function deleteSelectedScrobbles() {
+    var checkboxes = document.querySelectorAll('.scrobble-checkbox:checked');
+    var ids = [];
+    checkboxes.forEach(function(cb) {
+      ids.push(parseInt(cb.value));
+    });
+    
+    if (ids.length === 0) {
+      alert('Please select at least one scrobble to delete.');
+      return;
+    }
+    
+    if (!confirm('Are you sure you want to delete ' + ids.length + ' scrobble(s)?')) {
+      return;
+    }
+    
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', '/api/scrobble/delete', true);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          location.reload();
+        } else {
+          alert('Error deleting scrobbles: ' + xhr.responseText);
+        }
+      }
+    };
+    xhr.send(JSON.stringify(ids));
+  }
+  </script>
 {{end}}