<ion-view>
  <ion-nav-title ng-switch="tlTracks.length">
    <span ng-switch-when="0" translate>
      Empty
    </span>
    <span ng-switch-default>
      <span ng-if="currentTlTrack"
            translate
            translate-values="{count: tlTracks.length, index: index(currentTlTrack) + 1}"
            >
        {index} of {count}
      </span>
      <span ng-if="!currentTlTrack"
            translate
            translate-values="{count: tlTracks.length}"
            >
        {count} Tracks
      </span>
    </span>
  </ion-nav-title>
  <ion-nav-buttons side="secondary">
    <button class="button button-clear icon mopidy-icon-more"
            ng-click="popover.show($event)"
            >
    </button>
  </ion-nav-buttons>
  <ion-content>
    <ion-list>
      <ion-item class="item-thumbnail-left"
                ng-class="{'item-positive': tlTrack.tlid == currentTlTrack.tlid}"
                ng-click="play(tlTrack)"
                ng-repeat="tlTrack in tlTracks">
        <img ng-src="{{getImageURI(tlTrack.track)}}">
        <h2>{{tlTrack.track.name}}</h2>
        <p>
          {{tlTrack.track.artists[0].name}}
          <br>
          {{tlTrack.track.album.name}}
        </p>
        <ion-option-button class="button-assertive" ng-click="remove(tlTrack)" translate>
          Remove
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
