{{define "artist"}}
  <div class="profile-top">
    {{if .Artist.ImageUrl}}
    <img class="editable-image" data-entity="artist" data-id="{{.Artist.Id}}" data-field="image_url" src="{{.Artist.ImageUrl}}" alt="{{.Artist.Name}}'s image">
    {{else}}
    <img class="editable-image" data-entity="artist" data-id="{{.Artist.Id}}" data-field="image_url" src="/files/assets/pfps/default_artist.png" alt="{{.Artist.Name}}'s image">
    {{end}}
    <div class="username-bio">
      <h1>
        {{.Artist.Name}}
        {{if eq .LoggedInUsername .Username}}
        <button class="edit-btn" onclick="openEditModal()">Edit</button>
        {{end}}
      </h1>
    </div>
    <div class="profile-top-blank">
    </div>
      <div class="user-stats-top">
        <h3>{{formatInt .ListenCount}}</h3> <p>Listens<p>
      </div>
  </div>
  <div class="history">
    <h3>Scrobbles</h3>
    <table>
      <tr>
        <th>Artist</th>
        <th>Title</th>
        <th>Album</th>
        <th>Timestamp</th>
      </tr>
      {{$username := .Username}}
      {{range .Times}}
      <tr>
        <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}}/artist/{{urlquery .Artist.Name}}?page={{sub .Page 1}}">Prev Page</a>
    {{end}}
    <a href="/profile/{{.Username}}/artist/{{urlquery .Artist.Name}}?page={{add .Page 1}}">Next Page</a>
  </div>
  <div class="bio-box">
    <h3>Bio</h3>
    <p id="bio-display">{{.Artist.Bio}}</p>
  </div>

  {{if eq .LoggedInUsername .Username}}
  <div id="editModal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
      <h2>Edit Artist</h2>
      <form id="editForm" data-entity="artist" data-id="{{.Artist.Id}}">
        <label>Name: <input type="text" name="name" value="{{.Artist.Name}}"></label>
        <label>Bio: <textarea name="bio">{{.Artist.Bio}}</textarea></label>
        <label>Spotify ID: <input type="text" name="spotify_id" value="{{.Artist.SpotifyId}}"></label>
        <label>MusicBrainz ID: <input type="text" name="musicbrainz_id" value="{{.Artist.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}}
{{end}}