<ion-modal-view class="modal-view" ng-controller="ConfigCtrl as configctrl">
  <ion-header-bar class="bar-calm">
    <button class="button icon ion-arrow-left-c button-clear" ng-click="configctrl.exit()"></button>
    <h1 class="title">{{'Configurations' | translate}}</h1>
  </ion-header-bar>
  <ion-content class="padding-20" scroll="true">
    <form name="configForm" class="configForm">
      <ion-list class="nf-form">
        <label class="item item-input item-stacked-label">
          <span class="input-label">{{'TokenID' | translate}}</span>
          <input type="text" autocorrect="off" autocapitalize="off" ng-model="configctrl.tokenId" ng-change=""
                 ng-trim="true" placeholder="Token Id">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">{{'HOST/IP[DATA]' | translate}}</span>
          <input type="text" readonly="true" autocorrect="off" autocapitalize="off" required
                 ng-model="configctrl.config.dataIp"
                 ng-change="configctrl.config.dataIp = configctrl.config.dataIp.split(' ').join('')" ng-trim="true"
                 placeholder="Host/IP [data]">
        </label><label class="item item-input item-stacked-label">
        <span class="input-label">{{'HOST/IP[SYNC]' | translate}}</span>
        <input type="text" readonly="true" autocorrect="off" autocapitalize="off" required
               ng-model="configctrl.config.syncIp"
               ng-change="configctrl.config.syncIp = configctrl.config.syncIp.split(' ').join('')" ng-trim="true"
               placeholder="Host/IP [sync]">
      </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">{{'Tenant' | translate}}</span>
          <input type="text" autocorrect="off" readonly="true" autocapitalize="off" required
                 ng-model="configctrl.config.tenant"
                 ng-change="configctrl.config.tenant = configctrl.config.tenant.split(' ').join('')" ng-trim="true"
                 placeholder="Tenant">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">{{'Factory' | translate}}</span>
          <input type="text" autocorrect="off" autocapitalize="off" readonly="true" required
                 ng-model="configctrl.config.factory"
                 ng-change="configctrl.config.factory = configctrl.config.factory.split(' ').join('')" ng-trim="true"
                 placeholder="Factory">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">{{'Cluster' | translate}}</span>
          <input type="text" autocorrect="off" autocapitalize="off" required
                 ng-model="configctrl.config.cluster"
                 ng-change="configctrl.config.cluster = configctrl.config.cluster.split(' ').join('')" ng-trim="true"
                 placeholder="Cluster">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">{{'Line' | translate}}</span>
          <input type="text" autocorrect="off" autocapitalize="off" required ng-model="configctrl.config.line"
                 ng-change="configctrl.config.line = configctrl.config.line.split(' ').join('')" ng-trim="true"
                 placeholder="Line">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">{{'License' | translate}}</span>
          <input type="text" readonly="true" autocorrect="off" autocapitalize="off" ng-model="configctrl.config.license"
                 ng-change="configctrl.config.license = configctrl.config.license.split(' ').join('')" ng-trim="true"
                 placeholder="License">
        </label>
        <div class="row">
          <div class="col">
            <button ng-disabled="configForm.$invalid" ng-mobile-click="configctrl.click(true)"
                    class="button button-positive button-large no-animation  pull-right">
              {{'Done' | translate}}
            </button>
            &nbsp;
            <button ng-mobile-click="configctrl.clickRetrieve()"
                    class="button button-positive button-large no-animation pull-right">
              {{'Retrieve' | translate}}
            </button>
          </div>
        </div>

      </ion-list>
      </form>
  </ion-content>
</ion-modal-view>
