<ion-view cache-view="false" view-title="{{'Mopidy servers' | translate}}">
  <ion-nav-buttons side="secondary">
    <div ng-switch="settings.servers.length">
      <button class="mopidy-mobile-button-icon mopidy-mobile-icon-create"
              nav-transition="none"
              ng-switch-when="0"
              ui-sref="^.add"
              >
      </button>
      <button class="mopidy-mobile-button-icon mopidy-mobile-icon-edit"
              nav-transition="none"
              ng-switch-default
              ui-sref="^.edit"
              >
      </button>
    </div>
  </ion-nav-buttons>
  <ion-content>
    <ion-refresher on-refresh="refresh()" pulling-text="{{'Pull to refresh' | translate}}">
    </ion-refresher>

    <div class="padding" ng-if="servers.length == 0">
      <h2 translate>No servers found</h2>
      <p translate>Please make sure Zeroconf is enabled for any Mopidy servers in the same WiFi network as your device.</p>
      <p translate>Then pull to refresh, or add a server manually.</p>
    </div>

    <div class="list" ng-if="servers.length != 0">
      <a class="item item-icon-right"
         ng-class="{'item-positive': server.url == webSocketUrl}"
         ng-click="connect(server)"
         ng-repeat="server in servers | orderBy: name"
         >
        <h2>{{server.name}}</h2>
        <h4>{{server.url}}</h4>
        <i class="mopidy-mobile-icon-link icon-accessory"></i>
      </a>
    </div>

  </ion-content>
</ion-view>
