{% import "icons.html" as ic %}
<div class="album-heading" data-year="{{ album_year }}">
  <span class="album-heading-title">{{ album_title }}</span>
  <span class="album-heading-artist">{{ album_artist }}</span>
</div>
<div class="track-table-header">
  <span class="th-no">#</span>
  <span class="th-title">Title</span>
  <span class="th-artist">Artist</span>
  <span class="th-time">Time</span>
  <span class="th-star"></span>
</div>
<div class="track-table-rule"></div>
<ul class="row-list track-list">
  {% for track in tracks %}
  <li>
    <button type="button"
            class="row-button track-row"
            data-action="play-track"
            data-id="{{ track.id }}"
            data-album-id="{{ track.album_id|default(album_id, true) }}"
            data-title="{{ track.title|e }}"
            data-artist="{{ track.artist|e }}">
      <span class="track-no">{{ "%2d" % track.track_no }}</span>
      <span class="track-title"><span class="marquee-inner">{{ track.title }}</span></span>
      <span class="track-artist">{{ track.artist }}</span>
      <span class="track-time">{{ track.duration }}</span>
      <span class="track-star{% if track.starred %} is-starred{% endif %}"
            data-action="toggle-star"
            data-id="{{ track.id }}"
            role="button"
            aria-label="{% if track.starred %}Unstar{% else %}Star{% endif %}">{% if track.starred %}{{ ic.heart_filled() }}{% else %}{{ ic.heart() }}{% endif %}</span>
    </button>
  </li>
  {% else %}
  <li class="empty">{{ empty_message|default("No tracks on this album.", true) }}</li>
  {% endfor %}
</ul>