<ion-view view-title="{{ref.name || ref.uri || ('Library' | translate)}}">
  <ion-content>
    <ion-refresher
       on-refresh="refresh()"
       pulling-text="{{'Pull to refresh' | translate}}"
       >
    </ion-refresher>
    <form ng-submit="search(q)">
      <label class="item item-input">
        <i class="icon mopidy-icon-search placeholder-icon"></i>
        <input type="search" placeholder="{{'Search here...' | translate}}" ng-model="q">
      </label>
    </form>
    <div class="list">
      <!-- FIXME: directive? -->
      <div class="item item-complex item-icon-left browse-item"
           collection-repeat="ref in refs"
           collection-item-width="'100%'"
           collection-item-height="50"
           ng-class="{'item-icon-right': ref.type != 'track'}"
           ng-switch="ref.type"
           >
        <a class="item-content"
           href=""
           ng-click="play(ref.uri)"
           ng-switch-when="track"
           >
          <i class="icon mopidy-icon-track"></i>
          {{ref.name}}
        </a>
        <a class="item-content"
           ui-sref="tabs.library.browse({type: ref.type, name: ref.name, uri: ref.uri})"
           ng-switch-default
           >
          <i class="icon" ng-class="'mopidy-icon-' + ref.type"></i>
          {{ref.name}}
          <i class="icon icon-accessory ion-chevron-right"></i>
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>
