<ion-header>
  <ion-toolbar class="header-toolbar">
    <nav-buttons></nav-buttons>
    <ion-title color="light">{{'workListMain, notfDetails' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <div *ngIf="submitterInfoRes?.length > 0 ">

    <ion-card>

      <ion-card-header class="boxHdr">
        <div class="hrTitle"> {{'general, info' | translate}}</div>
      </ion-card-header>

      <ion-card-content>
        <div *ngFor="let submitterInfo of submitterInfoRes">
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, empNo' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.EMPLOYEE_NUMBER}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, name' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.EMPLOYEE_NAME}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, position' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.POSITION_NAME}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, grade' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.GRADE_NAME}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, job' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.JOB_NAME}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, category' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, orgEmail' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, orgName' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.ORGANIZATION_NAME}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, busG' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.BUSINESS_GROUP_NAME}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, locName' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.LOCATION_NAME}}</label>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="colBold" col-5>
              <label for="">{{'userProfile, payrol' | translate}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{submitterInfo.PAYROLL_NAME}}</label>
            </ion-col>
          </ion-row>
        </div>
      </ion-card-content>

    </ion-card>
  </div>
  <div *ngIf="notificationBodyRes?.length > 0 ">
    <ion-card *ngFor="let item of notificationBodyRes; let i=index ">

      <ion-card-header class="boxHdr">
        <div class="hrTitle"> {{'worklistMain, notfDetails' | translate}}</div>
      </ion-card-header>

      <ion-card-content>
        <div *ngFor="let notificationBody of item.Collection_Notification ">
          <ion-row *ngIf=" notificationBody.DISPLAY_FLAG != 'N' ">
            <ion-col class="colBold" col-5>
              <label for="">{{notificationBody.SEGMENT_PROMPT}}</label>
            </ion-col>
            <ion-col col-7>
              <label for="">{{notificationBody.SEGMENT_VALUE_DSP}}</label>
            </ion-col>
          </ion-row>
        </div>
      </ion-card-content>

    </ion-card>
  </div>

</ion-content>