{{define "playlist"}}{{template "header" .}}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <h2 class="h5 mb-0">{{.Data.Playlist.Name}}</h2>
    {{if .Data.Playlist.Description}}<div class="text-secondary small">{{.Data.Playlist.Description}}</div>{{end}}
  </div>
  <div class="d-flex gap-2">
    <a href="/playlists/{{.Data.Playlist.ID}}/export" class="btn btn-outline-secondary btn-sm"><i class="bi bi-download"></i> Export M3U</a>
    {{if .Data.Owned}}
    <form method="post" action="/playlists/{{.Data.Playlist.ID}}/delete" onsubmit="return confirm('Delete this playlist?');">
      {{template "csrf_field" .CSRFToken}}
      <button type="submit" class="btn btn-outline-danger btn-sm"><i class="bi bi-trash"></i> Delete</button>
    </form>
    {{end}}
  </div>
</div>
{{if .Data.Songs}}{{template "song_rows" .Data.Songs}}{{else}}<p class="text-secondary">This playlist is empty.</p>{{end}}
{{template "footer" .}}{{end}}