{{ $ident := .Get 0 }}

{{ $playlist := getJSON "http://spotify-public-proxy.theorangeone.net/playlist/" $ident }}

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

  <table class="table table-hover table-striped">
    <caption><a href="{{ $playlist.url }}">View playlist on Spotify</a></caption>
    <thead>
    <tr>
      <th scope="row">Track</th>
      <th scope="row">Artist</th>
      <th scope="row">Album</th>
      <th scope="row"></th>
    </tr>
    </thead>
    <tbody>
      {{ range sort $playlist.tracks "name" }}
        <tr>
          <td><a href="{{ .url }}">{{ .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 }}
    </tbody>
  </table>
</div>