{{define "album_card"}}
<a href="/albums/{{.ID}}" class="vs-card">
  <img class="vs-card-art" src="{{if .CoverArtID}}/cover-art/{{.CoverArtID}}?size=300{{else}}/static/img/default-art.svg{{end}}" alt="" loading="lazy">
  <div class="vs-card-title">{{.Title}}</div>
  <div class="vs-card-subtitle">{{.ArtistName}}</div>
</a>
{{end}}

{{define "artist_card"}}
<a href="/artists/{{.ID}}" class="vs-card">
  <img class="vs-card-art" style="border-radius:50%;" src="{{if .CoverArtID}}/cover-art/{{.CoverArtID}}?size=300{{else}}/static/img/default-art.svg{{end}}" alt="" loading="lazy">
  <div class="vs-card-title">{{.Name}}</div>
</a>
{{end}}

{{define "song_rows"}}
<div class="table-responsive" data-playable-list>
  <table class="vs-table vs-table-hover table mb-0">
    <tbody>
      {{range $i, $s := .}}
      <tr class="vs-playable"
          data-song-id="{{$s.ID}}"
          data-title="{{$s.Title}}"
          data-artist="{{$s.ArtistName}}"
          data-artist-id="{{$s.ArtistID}}"
          data-album="{{$s.AlbumTitle}}"
          data-album-id="{{$s.AlbumID}}"
          data-cover="{{$s.CoverArtID}}"
          data-starred="{{if $s.Starred}}1{{else}}0{{end}}">
        <td class="vs-track-num">{{if $s.TrackNumber}}{{$s.TrackNumber}}{{else}}{{add $i 1}}{{end}}</td>
        <td class="vs-song-art-cell">
          <img class="vs-song-art" src="{{if $s.CoverArtID}}/cover-art/{{$s.CoverArtID}}?size=80{{else}}/static/img/default-art.svg{{end}}" alt="" loading="lazy">
        </td>
        <td>
          <div class="fw-semibold">{{$s.Title}}</div>
          {{if $s.AlbumTitle}}<div class="text-secondary small">{{$s.ArtistName}} — {{$s.AlbumTitle}}</div>{{else}}<div class="text-secondary small">{{$s.ArtistName}}</div>{{end}}
        </td>
        <td class="text-end text-secondary small">
          {{fmtDuration $s.DurationSeconds}}
          {{if $s.IsAdmin}}<a href="/admin/songs/{{$s.ID}}/edit" title="Edit song" class="text-secondary ms-2"><i class="bi bi-pencil"></i></a>{{end}}
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}