{{ $user := .Get 0 }}
{{ $playlist_id := .Get 1 }}

{{ $playlist := getJSON "http://spotify-public-proxy.theorangeone.net/v1/users/" $user "/playlists/" $playlist_id }}

<div class="playlist">
  <a href="{{ $playlist.external_urls.spotify }}">
    <h3>
      {{ $playlist.name }}
    </h3>
  </a>

  <table class="table table-hover table-striped">
    <caption><a href="{{ $playlist.external_urls.spotify }}">View playlist on Spotify</a></caption>
    <thead>
    <tr>
      <th scope="row"></th>
      <th scope="row">Track</th>
      <th scope="row">Artist</th>
      <th scope="row">Album</th>
      <th scope="row">Preview</th>
    </tr>
    </thead>
    <tbody>
      {{ range sort $playlist.tracks.items "track.name" }}
        {{ with .track }}
          <tr>
            {{ with index (last 1 .album.images) 0 }}
              <td><div class="image" data-image="{{ .url }}"></div></td>
            {{ end }}
            <td><a href="{{ .external_urls.spotify }}">{{ .name }}</a></td>
            <td>
              {{ range $i, $e := .artists }}{{ if $i }}, {{ end }}{{ .name }}{{ end }}
            </td>
            <td>{{ .album.name }}</td>
            <td>
              <audio controls class="mejs__player" data-plyr='{"controls": ["play", "progress"]}'>
                <source src="{{ .preview_url }}" type="audio/mpeg" />
              </audio>
            </td>
          </tr>
        {{ end }}
      {{ end }}
    </tbody>
  </table>
</div>