<ion-view hide-nav-bar="true" >
  <!-- not a navbar, but should look like one... -->
  <ion-header-bar class="bar-stable">
    <div class="buttons mopidy-mobile-options">
      <button class="button icon mopidy-mobile-icon-consume"
              ng-class="{'button-positive': options.consume}"
              ng-click="setOptions({consume: !options.consume})"
              >
      </button>
      <button class="button icon mopidy-mobile-icon-random"
              ng-class="{'button-positive': options.random}"
              ng-click="setOptions({random: !options.random})"
              >
      </button>
      <button class="button icon mopidy-mobile-icon-repeat"
              ng-class="{'button-positive': options.repeat}"
              ng-click="setOptions({repeat: !options.repeat})"
              >
      </button>
      <button class="button icon mopidy-mobile-icon-single"
              ng-class="{'button-positive': options.single}"
              ng-click="setOptions({single: !options.single})"
              >
      </button>
    </div>
    <h1 class="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>
    </h1>
    <button class="button button-clear button-icon icon mopidy-mobile-icon-more"
            ng-click="popover.show($event)"
            ng-controller="TracklistMenuCtrl"
            >
    </button>
  </ion-header-bar>

  <ion-content class="has-header" delegate-handle="tracklistScroll">
    <ion-list>
      <ion-item class="item-thumbnail-left"
                id="{{'tlid-' + tlTrack.tlid}}"
                ng-class="{'item-positive': tlTrack.tlid == currentTlTrack.tlid}"
                ng-click="play(tlTrack)"
                ng-repeat="tlTrack in tlTracks">
        <img class="mopidy-mobile-thumbnail-track" ng-src="{{images[tlTrack.track.uri].uri}}">
        <h2>{{tlTrack.track.name}}</h2>
        <h3>{{tlTrack.track.artists[0].name}}</h3>
        <h4>{{tlTrack.track.album.name}}</h4>
        </p>
        <ion-option-button class="button-assertive" ng-click="remove(tlTrack)" translate>
          Remove
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
