<ion-modal-view class="modal-view" ng-controller="SummeryCtrl as summeryctrl">
  <ion-header-bar class="bar-calm">
    <button class="button icon ion-arrow-left-c button-clear" ng-click="summeryctrl.exit()"></button>
    <h1 class="title">{{'LineQualitySummary' | translate}}</h1>
  </ion-header-bar>


  <ion-content class="padding-10 line-setting" scroll="true" style="margin-top: 20px;">
    <div >
      <div class="row header" style="background-color: #11c1f3">
        <div class="col col-center">
          <h5 class="line-name">
            {{'Hour' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-style">
            {{'Style' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-so">
             {{'PO/SO' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-li">
            {{'LI/Colour' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-li">
            {{'Tot.ChkPcs' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-li">
            {{'PassedPcs' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-li">
            {{'Defects' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-li">
            {{'Deftiv.Pcs' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-li">
            {{'RejectPcs' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-li">
            {{'Recti.Pcs' | translate}}
          </h5>
        </div>
        <div class="col col-center" style="">
          <h5 class="line-li">
            {{'DHU' | translate}} %
          </h5>
        </div>
      </div>
      <div class="row">
        <div class="col col-center table-container">
          <div class="row" ng-repeat="(key,aline) in summeryctrl.summeryArry track by $index">
            <div class="col col-center " >
              <h5 class="line-name">{{aline.Hour}}</h5>
            </div>
            <div class="col col-center " >
              <h5 class="line-name">{{aline.Style}}</h5>
            </div>
            <div class="col col-center " >
              <h5 class="line-name">{{aline.Po}}</h5>
            </div>
            <div class="col col-center " >
              <h5 class="line-name">{{aline.Color}}</h5>
            </div>
            <div class="col col-center " >
              <h5 class="line-name" style="text-align: right">{{aline.TotChecked}}</h5>
            </div>
            <div class="col col-right " >
              <h5 class="line-name" style="text-align: right">{{aline.PassPcs}}</h5>
            </div>
            <div class="col col-right " >
              <h5 class="line-name" style="text-align: right">{{aline.Defects}}</h5>
            </div>
            <div class="col col-right " >
              <h5 class="line-name" style="text-align: right">{{aline.DefectivePcs}}</h5>
            </div>
            <div class="col col-right " >
              <h5 class="line-name" style="text-align: right">{{aline.RejectPcs}}</h5>
            </div>
            <div class="col col-right " >
              <h5 class="line-name" style="text-align: right">{{aline.RectifiedPcs}}</h5>
            </div>
            <div class="col col-right " >
              <h5 class="line-name" style="text-align: right">{{aline.Dhu}}</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row" >
      <div class="col">
        <div class="row header" style="background-color: #11c1f3">
          <div class="col col-center">
            <h5 class="line-name">{{'TopFiveOperations' | translate}}</h5>
          </div>
          <div class="col col-center">
            <h5 class="line-name">{{'Occurrence' | translate}}</h5>
          </div>
        </div>
        <div class="row">
          <div class="col col-center table-container">
            <div class="row" ng-repeat="(key,aline) in summeryctrl.sortedTopFiveOperation track by $index">
              <div class="col col-center">
                <h5 class="line-name">{{aline.k}}</h5>
              </div>
              <div class="col col-center">
                <h5 class="line-name">{{aline.v}}</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col" >
        <div class="row header" style="background-color: #11c1f3">
          <div class="col col-center">
            <h5 class="line-name">{{'TopFiveIssues' | translate}}</h5>
          </div>
          <div class="col col-center">
          <h5 class="line-name">{{'Occurrence' | translate}}</h5>
        </div>
        </div>
        <div class="row">
          <div class="col col-center table-container">
            <div class="row" ng-repeat="(key,aline) in summeryctrl.sortedTopFiveIssues track by $index">
              <div class="col col-center">
                <h5 class="line-name">{{aline.k}}</h5>
              </div>
              <div class="col col-center">
                <h5 class="line-name">{{aline.v}}</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ion-content>




</ion-modal-view>
