<ion-modal-view class="modal-view" ng-controller="StartDataCtrl as startdatactrl" ng-init="startdatactrl.initData()"
                xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
  <ion-header-bar class="bar-calm">
    <button class="button icon ion-arrow-left-c button-clear" ng-click="startdatactrl.exit()"></button>
    <h1 class="title">{{'LineSettings' | translate}}</h1>
  </ion-header-bar>
  <ion-content class="padding-10 line_settings" scroll="true">
    <form name="IPconfigForm">
      <div class="row">
        <div class="col col-center">
          <div class="list nf-form">
            <div class="row">
              <div class="col">
                <label class="item item-input item-select item-icon-right" ng-click="startdatactrl.showPopup()">
                  <span class="input-label">{{'SessionPlan' | translate}}</span>
                  <input readonly type="text" required ng-model="startdatactrl.day_start_prams.sessionPlan"
                         placeholder="{{'SessionPlan' | translate}}" required>
                </label>
              </div>
              <div class="col">
                <label class="item item-input item-select item-icon-right" ng-click="startdatactrl.showStylePopup()">
                  <span class="input-label">{{startdatactrl.titleKey3 | translate}}</span>
                  <input id="style" readonly type="text" required ng-model="startdatactrl.day_start_prams.style"
                         placeholder="{{'PleaseSelect' | translate}} {{startdatactrl.titleKey3 | translate}}" required capitalize>
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <label class="item item-input item-select item-icon-right" ng-click="startdatactrl.showPoPopup()">
                  <span class="input-label">{{startdatactrl.titleKey2 | translate}}</span>
                  <input type="text" readonly required ng-model="startdatactrl.day_start_prams.key2"
                         placeholder="{{'PleaseSelect' | translate}} {{startdatactrl.titleKey2 | translate}}" required capitalize>
                </label>
              </div>
              <div class="col">
                <label class="item item-input item-select item-icon-right" ng-click="startdatactrl.showColourPopup()">
                  <span class="input-label">{{startdatactrl.titleKey1 | translate }}</span>
                  <input type="text" readonly ng-model="startdatactrl.day_start_prams.key1"
                         placeholder="{{'PleaseSelect' | translate}} {{startdatactrl.titleKey1 | translate}}" required capitalize>
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <label class="item item-input item-select item-icon-right" required
                       ng-click="startdatactrl.showSiluhoutteIdPopup()">
                  <span class="input-label">{{'Silhouette' | translate}}</span>
                  <input readonly type="text" ng-model="startdatactrl.day_start_prams.siluhoutteid" required
                         placeholder="{{'PleaseSelect' | translate}} {{'Silhouette' | translate}} ">
                </label>
              </div>
            </div>

            <div class="row"></div>

            <div class="row" ng-show="startdatactrl.showbuyerData">
              <div class="col">
                <label class="item item-input item-select item-icon-right" ng-click="startdatactrl.showBuyerPopup()">
                  <span class="input-label">{{startdatactrl.titleKey4 | translate}}</span>
                  <input type="text" readonly required ng-model="startdatactrl.day_start_prams.buyerId"
                         placeholder="{{'PleaseSelect' | translate}} {{startdatactrl.titleKey4 | translate}}" required capitalize>
                </label>
              </div>
              <div class="col">
                <label class="item item-input item-select item-icon-right" ng-click="startdatactrl.showCategoryPopup()">
                  <span class="input-label">{{startdatactrl.titleKey5 | translate}}</span>
                  <input readonly type="text" required ng-model="startdatactrl.day_start_prams.categoryId"
                         placeholder="{{'PleaseSelect' | translate}} {{startdatactrl.titleKey5 | translate}}" required>
                </label>
              </div>
            </div>

            <!--<div class="row" ng-show="!startdatactrl.showMemberSpinner">-->
              <!--<div class="col">-->
                <!--<label class="item item-input item-select item-icon-right" ng-click="startdatactrl.showSizePopup()">-->
                  <!--<span class="input-label">{{startdatactrl.titleKey6}}</span>-->
                  <!--<input type="text" readonly ng-model="startdatactrl.day_start_prams.sizeId"-->
                         <!--placeholder="Please select a {{startdatactrl.titleKey6}}" required capitalize>-->
                <!--</label>-->
              <!--</div>-->
            <!--</div>-->


            <div class="row" ng-show="startdatactrl.showMemberSpinner"></div>

            <div class="row" ng-show="!startdatactrl.showOperators && startdatactrl.showMemberSpinner">
              <div class="col col-33">
              </div>
              <div class="col col-33 nf-center">
                <label class="item item-input item-stacked-label nf-center">
                  <span class="input-label">{{'Members' | translate}}</span></label></br>
                <button class="button button-clear button-small button-dark stat-number">
                  {{startdatactrl.day_start_prams.members}}
                </button>
                </label>
              </div>
              <div class="col col-33">
              </div>
            </div>

            <div class="row" ng-show="startdatactrl.showOperators && startdatactrl.showMemberSpinner">
              <div class="col col-33">
              </div>
              <div class="col col-33 nf-center">
                <label class="item item-input item-stacked-label nf-center">
                  <button class="button button-clear button-small button-dark stat-number">{{startdatactrl.whole}}
                  </button>
                </label>
              </div>
              <div class="col col-33">
              </div>
            </div>

            <div class="row" ng-show="startdatactrl.showMemberSpinner">
              <div ng-show="startdatactrl.showOperators" class="col col-10">
                <span class="input-label">{{'Operators' | translate}}</span></label>
              </div>
              <div class="col col-10">
                <button class="button button-small button-positive no-animation" ng-disabled="startdatactrl.whole==0"
                        ng-click="startdatactrl.decrement()">
                  <i class="icon ion-minus-round"></i>
                </button>
              </div>
              <div ng-class="{'col-80': !startdatactrl.showHelpers, 'col-70': startdatactrl.showHelpers}" class="col">
                <div class="item range range-positive">
                  <i class="nf-mdi-image-timer-auto"></i>
                  <input type="range" name="volume" min="0" max="100" ng-model="startdatactrl.whole"
                         value="{{startdatactrl.whole}}"/>
                  <i class="nf-mdi-social-group"></i>
                </div>
              </div>
              <div class="col col-10">
                <button class="button button-small button-positive no-animation" ng-disabled="startdatactrl.whole==100"
                        ng-click="startdatactrl.increment()">
                  <i class="icon ion-plus-round"></i>
                </button>
              </div>
            </div>

            <div class="row" ng-show="startdatactrl.showOperators">
              <div class="col col-33">
              </div>
              <div class="col col-33 nf-center">
                <label class="item item-input item-stacked-label nf-center">
                  <button class="button button-clear button-small button-dark stat-number">{{startdatactrl.decimal}}
                  </button>
                </label>
              </div>
              <div class="col col-33">
              </div>
            </div>

            <div class="row" ng-show="startdatactrl.showHelpers">
              <div ng-show="startdatactrl.showHelpers" class="col col-10">
                <span class="input-label">{{'Helpers' | translate}}</span></label></br>
              </div>
              <div class="col col-10">
                <button class="button button-small button-positive no-animation" ng-disabled="startdatactrl.decimal==0"
                        ng-click="startdatactrl.decrementDecimal()">
                  <i class="icon ion-minus-round"></i>
                </button>
              </div>

              <div ng-class="{'col-80': !startdatactrl.showHelpers, 'col-70': startdatactrl.showHelpers}" class="col">
                <div class="item range range-positive">
                  <i class="nf-mdi-image-timer-auto"></i>
                  <input type="range" name="volume" min="0" ng-model="startdatactrl.decimal" max="99"
                         value="{{startdatactrl.decimal}}" ng-click="startdatactrl.setMembers()">
                  <i class="nf-mdi-social-group"></i>
                </div>
              </div>
              <div class="col col-10">
                <button class="button button-small button-positive no-animation" ng-disabled="startdatactrl.decimal==99"
                        ng-click="startdatactrl.incrementDecimal()">
                  <i class="icon ion-plus-round"></i>
                </button>
              </div>
            </div>

            <div class="row" ng-show="startdatactrl.showDecimalVal && startdatactrl.showMemberSpinner">
              <div class="col col-10">
                <button class="button button-small button-positive no-animation" min="0"
                        ng-disabled="startdatactrl.decimal==0"
                        ng-click="startdatactrl.decrementDecimal()">
                  <i class="icon ion-minus-round"></i>
                </button>
              </div>

              <div class="col col-80">
                <div class="item range range-positive">
                  <i class="nf-mdi-image-timer-auto"></i>
                  <input type="range" name="volume" min="0" ng-model="startdatactrl.decimal" max="99"
                         value="{{startdatactrl.decimal}}" ng-click="startdatactrl.setMembers()">
                  <i class="nf-mdi-social-group"></i>
                </div>
              </div>
              <div class="col col-10">
                <button class="button button-small button-positive no-animation" ng-disabled="startdatactrl.decimal==99"
                        ng-click="startdatactrl.incrementDecimal()">
                  <i class="icon ion-plus-round"></i>
                </button>
              </div>
            </div>


            <div class="row">
              <div class="col">
                <button ng-disabled="IPconfigForm.$invalid;startdatactrl.isDisabled"
                        ng-mobile-click="startdatactrl.click()"
                        class="button button-positive button-large no-animation pull-right">
                  {{'StartNewCycle' | translate}}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </ion-content>
</ion-modal-view>
