{{ define "main" }}
<div id="main">
  <div class="container">
    {{ partial "content.html" . }}

    {{ $user := default .Site.Data.social.accounts.spotify.username .Params.user }}

    {{ $playlist := getJSON "https://spotify-public-proxy.herokuapp.com/v1/users/" $user "/playlists/" .Params.playlist }}

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

      <table class="table table-hover table-striped table-dark">
        <thead>
        <tr>
          <th scope="row"></th>
          <th scope="row"></th>
          <th scope="row">Track</th>
          <th scope="row">Artist</th>
          <th scope="row">Album</th>
        </tr>
        </thead>
        <tbody>
          {{ range sort $playlist.tracks.items "track.name" }}
            {{ with .track }}
              {{ $spotify_url := .external_urls.spotify }}
              <tr>
                {{ with index .album.images 0 }}
                  <td>
                    <a href="{{ $spotify_url }}"><div class="image" data-image="{{ .url }}"></div></a>
                  </td>
                {{ end }}
                <td class="text-center">
                  {{ if .preview_url }}
                    <a href="{{ .preview_url }}"><i class="fas fa-play"></i></a>
                  {{ end }}
                </td>
                <td><a href="{{ $spotify_url }}">{{ .name }}</a></td>
                <td>
                  {{ range $i, $e := .artists }}{{ if $i }}, {{ end }}{{ .name }}{{ end }}
                </td>
                <td>{{ .album.name }}</td>
              </tr>
            {{ end }}
          {{ end }}
        </tbody>
      </table>
    </div>
  </div>
  {{ partial "share.html" . }}
</div>
{{ end }}