<ion-view view-title="{{ref.name || ('Library' | translate)}}">
  <ion-nav-buttons side="secondary">
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-play"
            ng-click="actions.default(tracks)"
            ng-disabled="!tracks.length"
            >
    </button>
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-search"
            ui-sref="^.query({name: ref.name, type: ref.type, uri: ref.uri})"
            >
    </button>
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-menu"
            ng-click="popover.show($event)"
            ng-controller="LibraryMenuController"
            >
    </button>
  </ion-nav-buttons>
  <ion-content>
    <ion-refresher on-refresh="refresh()" pulling-text="{{'Pull to refresh' | translate}}">
    </ion-refresher>
    <form ng-submit="search({any: [q], uris: ref.uri ? [ref.uri] : null})">
      <ion-input class="item item-input">
        <i class="mopidy-mobile-icon-search placeholder-icon"></i>
        <input type="search" placeholder="{{'Search here' | translate}}..." ng-model="q">
      </ion-input>
    </form>
    <ion-list>
      <div collection-repeat="item in items"
           item-height="item.type == 'track' ? '83px' : '52px'"
           item-width="100%"
           ng-switch="item.type"
           >
        <ion-item class="item-thumbnail-left item-button-right"
                  ng-click="actions.default(item)"
                  ng-switch-when="track"
                  >
          <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, item)">
          </button>
        </ion-item>
        <ion-item class="item-icon-left item-icon-right"
                  ng-switch-default
                  ui-sref="library.browse({type: item.type, name: item.name, uri: item.uri})"
                  >
          <i ng-class="'mopidy-mobile-icon-' + item.type"></i>
          {{item.name || item.uri}}
          <i class="mopidy-mobile-icon-link icon-accessory"></i>
        </ion-item>
      </div>
    </ion-list>
  </ion-content>
</ion-view>
