<ion-view cache-view="false" view-title="{{ref.name || ref.uri}}">
  <ion-nav-buttons side="secondary">
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-play"
            ng-click="actions.default(items)"
            ng-disabled="!items.length"
            >
    </button>
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-edit"
            nav-transition="none"
            ng-show="editable"
            ui-sref="^.edit({uri: ref.uri})"
            >
    </button>
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-menu"
            ng-click="popover.show($event)"
            ng-controller="PlaylistMenuController"
            >
    </button>
  </ion-nav-buttons>
  <ion-content>
    <ion-refresher on-refresh="refresh()" pulling-text="{{'Pull to refresh' | translate}}">
    </ion-refresher>
    <ion-list>
      <ion-item class="item-thumbnail-left item-button-right"
                collection-repeat="item in items"
                ng-click="actions.default(item)"
                >
        <img ng-class="{'mopidy-mobile-thumbnail-track': !images[item.uri].uri}"
             ng-src="{{images[item.uri].uri || thumbnail.src}}"
             >
        <h2>{{item.name || item.uri}}</h2>
        <h3 class="mopidy-mobile-artists" ng-show="item.artists.length">
          <span ng-repeat="artist in item.artists">{{artist.name || artist.uri}}</span>
        </h3>
        <h4>{{item.album.name || item.genre || item.comment}}</h4>
        <button class="mopidy-mobile-button-icon mopidy-mobile-icon-menu icon-accessory"
                ng-click="popover.show($event)">
        </button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
