{{define "profile"}}
  <div class="profile-top">
    <img src="{{.Pfp}}" alt="{{.Username}}'s avatar">
    <div class="username-bio">
      <h1>{{.Username}}</h1>
      <h2>{{.Bio}}</h2>
    </div>
    <div class="profile-top-blank">
    </div>
      <div class="user-stats-top">
        <h3>{{formatInt .ScrobbleCount}}</h3> <p>Listens<p>
        <h3>{{formatInt .TrackCount}}</h3> <p>Unique Tracks<p>
        <h3>{{formatInt .ArtistCount}}</h3> <p>Artists<p>
      </div>
  </div>
  <div class="history">
    <h3>Listening History</h3>
    <table>
      <tr>
        <th>Artist</th>
        <th>Title</th>
        <th>Timestamp</th>
      </tr>
      {{if .NowPlayingTitle}}
      <tr>
        <td>{{.NowPlayingArtist}}</td>
        <td>{{.NowPlayingTitle}}</td>
        <td>Now Playing</td>
      </tr>
      {{end}}
      {{$artistIdsList := .ArtistIdsList}}
      {{$times := .Times}}
      {{$username := .Username}}
      {{range $index, $title := .Titles}}
      <tr>
        <td>
          {{- $artistIds := index $artistIdsList $index}}
          {{- $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 (index $.Artists $index)}}/{{urlquery $title}}">{{$title}}</a></td>
        <td title="{{formatTimestampFull (index $times $index)}}">{{formatTimestamp (index $times $index)}}</td>
      </tr>
      {{end}}
    </table>
  </div>
  <div class="page_buttons">
    {{if gt .Page 1 }}
    <a href="/profile/{{.Username}}?page={{sub .Page 1}}">Prev Page</a>
    {{end}}
    <a href="/profile/{{.Username}}?page={{add .Page 1}}">Next Page</a>
  </div>
{{end}}