muzi/templates/song.gohtml

{{define "song"}}
  <div class="profile-top">
    <div class="username-bio">
      <h1>
        {{.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}}
      <h2>
        {{- range $i, $name := .ArtistNames}}{{if $i}}, {{end}}<a href="/profile/{{$.Username}}/artist/{{urlquery $name}}">{{$name}}</a>{{end}}
      </h2>
      {{end}}
      {{range .Albums}}
      <h3><a href="/profile/{{$.Username}}/album/{{urlquery $.Artist.Name}}/{{urlquery .Title}}">{{.Title}}</a></h3>
      {{end}}
    </div>
    <div class="profile-top-blank">
    </div>
      <div class="user-stats-top">
        <h3>{{formatInt .ListenCount}}</h3> <p>Listens<p>
      </div>
  </div>
  <div class="history">
    <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>
        <th>Timestamp</th>
      </tr>
      {{$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}}
        </td>
        <td><a href="/profile/{{$username}}/song/{{urlquery .ArtistName}}/{{urlquery .SongName}}">{{.SongName}}</a></td>
        <td><a href="/profile/{{$username}}/album/{{urlquery .ArtistName}}/{{urlquery .AlbumName}}">{{.AlbumName}}</a></td>
        <td title="{{formatTimestampFull .Timestamp}}">{{formatTimestamp .Timestamp}}</td>
      </tr>
      {{end}}
    </table>
  </div>
  <div class="page_buttons">
    {{if gt .Page 1 }}
    <a href="/profile/{{.Username}}/song/{{urlquery .Artist.Name}}/{{urlquery .Song.Title}}?page={{sub .Page 1}}">Prev Page</a>
    {{end}}
    <a href="/profile/{{.Username}}/song/{{urlquery .Artist.Name}}/{{urlquery .Song.Title}}?page={{add .Page 1}}">Next Page</a>
  </div>

  {{if eq .LoggedInUsername .Username}}
  <div id="editModal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
      <h2>Edit Song</h2>
      <form id="editForm" data-entity="song" data-id="{{.Song.Id}}">
        <label>Title: <input type="text" name="title" value="{{.Song.Title}}"></label>
        <label>Spotify ID: <input type="text" name="spotify_id" value="{{.Song.SpotifyId}}"></label>
        <label>MusicBrainz ID: <input type="text" name="musicbrainz_id" value="{{.Song.MusicbrainzId}}"></label>
        <div class="modal-buttons">
          <button type="button" class="cancel-btn" onclick="closeEditModal()">Cancel</button>
          <button type="submit">Save</button>
        </div>
      </form>
    </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}}