{{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="/static/img/default-art.svg" 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-album="{{$s.AlbumTitle}}"
          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>
          <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}}</td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}