<ion-view view-title="{{'Tracklist' | translate}}">
  <ion-nav-buttons side="secondary">
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-edit"
            nav-transition="none"
            ui-sref="^.edit">
    </button>
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-menu"
            ng-controller="TracklistMenuController as menu"
            ng-click="menu.show($event)"
            >
    </button>
  </ion-nav-buttons>
  <ion-nav-title ng-switch="currentTlTrack || 'none'">
    <span ng-switch-when="none" translate translate-values="{count: tlTracks.length}">
      {count} tracks
    </span>
    <span ng-switch-default translate translate-values="{count: tlTracks.length, index: index(currentTlTrack) + 1}">
      {index} of {count}
    </span>
  </ion-nav-title>
  <ion-content delegate-handle="tracklistScroll">
    <ion-refresher on-refresh="refresh()" pulling-text="{{'Pull to refresh' | translate}}">
    </ion-refresher>
    <ion-list>
      <ion-item class="item-thumbnail-left item-button-right"
                ng-repeat="tlTrack in tlTracks"
                item-height="84px"
                item-width="100%"
                ng-class="{'item-positive': tlTrack.tlid == currentTlTrack.tlid}"
                ng-click="play(tlTrack)"
                >
        <img ng-class="{'mopidy-mobile-thumbnail-track': !images[tlTrack.track.uri].uri}"
             ng-src="{{images[tlTrack.track.uri].uri || thumbnail.src}}"
             >
        <h2>{{tlTrack.track.name || tlTrack.track.uri}}</h2>
        <h3 class="mopidy-mobile-artists" ng-show="tlTrack.track.artists.length">
          <span ng-repeat="artist in tlTrack.track.artists">{{artist.name || artist.uri}}</span>
        </h3>
        <h4>{{tlTrack.track.album.name || tlTrack.track.genre || tlTrack.track.comment}}</h4>
        <button class="mopidy-mobile-button-icon mopidy-mobile-icon-menu icon-accessory"
                ng-click="popover.show($event, tlTrack.track)">
        </button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
