<ion-view view-title="{{ 'SizeList' | translate }}" xmlns="http://www.w3.org/1999/html">

  <ion-content class="defect-page has-header" scroll="true" ng-class="{'sizewise_event':rejectssizewisectrl.focusgranted}">
    <form name="sizeWiseForm" class="sizewise_event">
      <div class="row">
        <div class="col">
          <label class="item item-input item-select item-icon-right" ng-click="rejectssizewisectrl.showStylePopup()">
            <span class="input-label">{{'Style' | translate}}</span>
            <input readonly type="text" required ng-model="rejectssizewisectrl.filter_data.style" placeholder="Style"
                   required>
          </label>
        </div>

        <div class="col">
          <label class="item item-input item-select item-icon-right" ng-click="rejectssizewisectrl.showBuyerPopup()">
            <span class="input-label">{{'Buyer' | translate}}</span>
            <input readonly type="text" required ng-model="rejectssizewisectrl.filter_data.buyerId" placeholder="Buyer"
                   required>
          </label>
        </div>

        <div class="col">
          <label class="item item-input item-select item-icon-right" ng-click="rejectssizewisectrl.showSizeListPopup()">
            <span class="input-label">{{'SizeList' | translate}}</span>
            <input readonly type="text" required ng-model="rejectssizewisectrl.filter_data.categoryId"
                   placeholder="Size List"
                   required>
          </label>
        </div>
      </div>
      <div class="row" style="height:80%; width: 100%;" ng-show="rejectssizewisectrl.sizeList.length==0">
        <div class="valign-wrapper empty-message">
          <div class="valign">
            <i class="icon ion-information-circled"></i>
            <br>
            {{'PleaseSelectRelevantFields' | translate}}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <ion-list class="operation-list">
            <ion-item class="item-icon-right"
                      ng-repeat="operationl in rejectssizewisectrl.sizeList | startFrom:currentPage*pageSize | limitTo:pageSize/2 :0"
                      ng-click="rejectssizewisectrl.setSelectedOperation(operationl.name)"
                      ng-class="{ active: operationl.selected }">
              {{operationl.name}}
              <i class="icon ion-checkmark-circled"></i>
            </ion-item>
          </ion-list>
        </div>
        <div class="col">
          <ion-list class="operation-list">
            <ion-item class="item-icon-right"
                      ng-repeat="operationr in rejectssizewisectrl.sizeList | startFrom:(currentPage*pageSize+pageSize/2) | limitTo:pageSize/2 :0"
                      ng-click="rejectssizewisectrl.setSelectedOperation(operationr.name)"
                      ng-class="{ active: operationr.selected }">
              {{operationr.name}}
              <i class="icon ion-checkmark-circled"></i>
            </ion-item>
          </ion-list>
        </div>

        <div class="col" ng-show="rejectssizewisectrl.sizeList.length!=0">
          <div class="row">
            <div class="col" style="text-align: center">

              <button ng-mobile-click="rejectssizewisectrl.operationClick(rejectssizewisectrl.bundlesizes[0])"
                      class="button button-positive button-large no-animation pull-right">
                {{rejectssizewisectrl.bundlesizes[0]}}
              </button>

            </div>
            <div class="col">

              <button ng-mobile-click="rejectssizewisectrl.operationClick(rejectssizewisectrl.bundlesizes[1])"
                      class="button button-positive button-large no-animation">
                {{rejectssizewisectrl.bundlesizes[1]}}
              </button>

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

              <button ng-mobile-click="rejectssizewisectrl.operationClick(rejectssizewisectrl.bundlesizes[2])"
                      class="button button-positive button-large no-animation pull-right">
                {{rejectssizewisectrl.bundlesizes[2]}}
              </button>

            </div>
            <div class="col">

              <button ng-mobile-click="rejectssizewisectrl.operationClick(rejectssizewisectrl.bundlesizes[3])"
                      class="button button-positive button-large">
                {{rejectssizewisectrl.bundlesizes[3]}}
              </button>

            </div>
          </div>
          <div class="row">
            <div class="col">
              <input type="number" style="margin-left: 100px; height: 75px; font-size: 42px; color: #7f7f7f;"
                     ng-focus="rejectssizewisectrl.focusGrant()" ng-blur="rejectssizewisectrl.focusLoose()"
                     placeholder="No Pcs" value="01" ng-model="rejectssizewisectrl.pcs" min="1" max="1000">
            </div>
            <div class="col">
              <button class="button button-small button-positive no-animation pull-right"
                      ng-click="rejectssizewisectrl.decrement()" style="margin: 2px;">
                <i class="icon ion-minus-round"></i>
              </button>
              </br>

              <button class="button button-small button-positive no-animation pull-right"
                      ng-click="rejectssizewisectrl.increment()" style="margin: 2px;">
                <i class="icon ion-plus-round"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col align-center button-wrapper">
          <div class="button-set">
            <button class="button button-positive button-clear" ng-disabled="currentPage == 0"
                    ng-click="currentPage=currentPage-1">
              {{'Previous' | translate}}
            </button>
            <span class="pagenumber">{{currentPage+1}}/{{numberOfPages(rejectssizewisectrl.sizeList)}}{{'page' | translate}}</span>
            <button class="button button-positive button-clear"
                    ng-disabled="currentPage >= rejectssizewisectrl.sizeList.length/pageSize - 1"
                    ng-click="currentPage=currentPage+1">
              {{'Next' | translate}}
            </button>
          </div>
        </div>
        <div class="col button-wrapper" style="margin-right: 15px;">
          <button class="button button-large button-positive pull-right"
                  ng-click="rejectssizewisectrl.operationClick(rejectssizewisectrl.pcs)"
                  style="margin-right: 10px; width: 15%">
            {{'Done' | translate}}
          </button>
        </div>
      </div>
    </form>
  </ion-content>
</ion-view>
