<ion-view cache-view="false" view-title="{{'Add server' | translate}}">
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button class="button-clear" ng-click="goBack()">
      <i class="mopidy-mobile-icon-close"></i> {{'Cancel' | translate}}
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-content ng-controller="ServerController as server">
    <form class="list" name="form" ng-submit="add({name: server.name, url: server.webSocketUrl()}).then(goBack)">
      <ion-input class="item item-input">
        <ion-label translate>Name</ion-label>
        <input name="name" ng-model="server.name" placeholder="Mopidy Server" required type="text">
      </ion-input>
      <ion-input class="item item-input">
        <ion-label translate>Host</ion-label>
        <input name="host" ng-model="server.host" placeholder="192.168.1.1" required type="text">
      </ion-input>
      <ion-input class="item item-input">
        <ion-label translate>Port</ion-label>
        <input ng-model="server.port" placeholder="6680" required type="number">
      </ion-input>
      <ion-input class="item item-input">
        <ion-label translate>Path</ion-label>
        <input ng-model="server.path" placeholder="/mopidy/ws/" required type="text">
      </ion-input>
      <ion-toggle ng-model="server.secure">
        <ion-label translate>Secure connection</ion-label>
      </ion-toggle>
      <button class="button button-positive button-full item"
              ng-disabled="form.$invalid"
              translate
              type="submit">
        Add server
      </button>
    </form>
  </ion-content>
</ion-view>
