{{define "playlists"}}{{template "header" .}}
<form method="post" action="/playlists" class="row g-2 mb-4" style="max-width: 480px;">
  {{template "csrf_field" .CSRFToken}}
  <div class="col-8">
    <input type="text" name="name" class="form-control" placeholder="New playlist name" required>
  </div>
  <div class="col-4">
    <button type="submit" class="btn btn-primary w-100"><i class="bi bi-plus-lg"></i> Create</button>
  </div>
</form>

{{if .Data}}
<div class="list-group">
  {{range .Data}}
  <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="/playlists/{{.ID}}">
    <span><i class="bi bi-list-ul me-2"></i>{{.Name}}{{if .IsPublic}} <span class="badge text-bg-secondary">public</span>{{end}}</span>
  </a>
  {{end}}
</div>
{{else}}
<p class="text-secondary">No playlists yet.</p>
{{end}}
{{template "footer" .}}{{end}}