
<app-generic-header
  showBack="true"
  backLink="/my-team/home"
  [headerText]="'userProfile, emp-detail' | translate">
</app-generic-header>



<ion-content>
  <div class="contentBg">
    <div class="result-graph" >
        <div class="user-info">
          <div class="user-image-container">
            <div  (click)="setFavorite(employee)">
              <img *ngIf="!isFavorite" [ngClass]="direction == 'en' ? 'favIcon':'favIcon-ar' "  src="../assets/imgs/fav.svg">
              <img *ngIf="isFavorite" [ngClass]="direction == 'en' ? 'favIcon':'favIcon-ar' "  src="../assets/imgs/favFilled.svg">
              <!-- <ion-col><img src="../assets/imgs/fav filled.svg"></ion-col> -->
            </div>
            <div class="user-image">
              <img class="img"  [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
            </div>
              <div [ngClass]="direction == 'en' ? 'call':'call-ar' "   slot="end" > 
                <a  [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
                  <img src="../assets/imgs/call-o.svg">
                </a>
               </div>
                 <!-- <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
                              <img src="../assets/imgs/profile.svg">
                            </a> -->
          </div>
          <div style="margin-top: 25px;">
          <h1 class="name">{{employee.EMPLOYEE_NAME}}</h1>
          <span class="email">{{employee.EMPLOYEE_EMAIL_ADDRESS}}</span>
        </div>
          <div >
            <ion-row style="margin-top: 11px;">
              <ion-col [size]="6">
                <p class="subTitle">{{ts.trPK('userProfile','role')}}</p>
                  <span class="Boldtext">{{jobName}}</span>
              </ion-col>
              <ion-col [size]="6" style="border-left: 1px solid rgb(221 221 221);">
                <p class="subTitle" style="line-height: 12px !important;">{{ts.trPK('userProfile','empNo')}}</p>
                <span class="Boldtext">{{employee.EMPLOYEE_NUMBER}}</span>
              </ion-col>
            </ion-row>
          </div>
        </div>

      <div class="btnDiv">
   
          <ion-segment
            (ionChange)="segmentChanged($event)"  
            [value]="activeSegment">
         <ion-col [size]="3">
           <ion-col>
          <ion-segment-button
          value="About"
          [ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
          <!-- <ion-label> Team Members</ion-label> -->
          <img class="imgSize" src="../assets/imgs/profile.svg">
          </ion-segment-button>
        </ion-col>
      <ion-col>
          <span class="btnTitle">{{ts.trPK('myTeam','profile-details')}}</span>
        </ion-col>
         </ion-col>
      <ion-col [size]="3" (click)="getMenuEntries(employee)">
        <ion-col>
      <ion-segment-button
            value="create-request"
            [ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
            <img class="imgSize" src="../assets/imgs/create-req.svg">
      </ion-segment-button>
        </ion-col>
      <ion-col > <span class="btnTitle">{{ts.trPK('vacation-rule','create-request')}}</span></ion-col>
      </ion-col>
      <ion-col [size]="3">
        <ion-col>
            <ion-segment-button
                value="Attendance"
                [ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
                <!-- <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label> -->
                <img class="imgSize" src="../assets/imgs/view-attendance.svg">
            </ion-segment-button>
          </ion-col>
        <ion-col> <span class="btnTitle">{{ts.trPK('myTeam','view-attendence')}} </span></ion-col>
      </ion-col>
      <ion-col [size]="3">
        <ion-col>
            <ion-segment-button
                value="TeamMembers"
                [ngClass]="activeSegment == 'TeamMembers' ? 'active-Segment' : 'normal-Segment'">
                <!-- <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label> -->
                <img class="imgSize" src="../assets/imgs/team-members.svg">
            </ion-segment-button>
          </ion-col>
        <ion-col><span class="btnTitle">{{ts.trPK('myTeam','team-members')}}</span></ion-col>
          </ion-col>
        </ion-segment>
        
      </div>
      <!-- <div class="user-actions">
        <ion-row class="ion-justify-content-center">
                <ion-col [size]="3">
                    <div class="action-button col-button">
                        <span>{{ts.trPK('myTeam','profile-details')}}</span>
                    </div>
                </ion-col>
                <ion-col [size]="3" (click)="getMenuEntries(employee)">
                  <div class="action-button col-button">
                      <span>{{ts.trPK('vacation-rule','create-request')}}</span>
                  </div>
                </ion-col>
                  <ion-col [size]="3" >
                  <div class="action-button col-button">
                      <span>{{ts.trPK('myTeam','view-attendence')}} </span>
                  </div>
                </ion-col>
                <ion-col [size]="3" >
                  <div class="action-button col-button">
                      <span>{{ts.trPK('myTeam','team-members')}}</span>
                  </div>
                </ion-col>
              </div> -->
    

        <!-- <div class="user-actions">
            <ion-row class="ion-justify-content-center">
                    <ion-col [size]="4">
                        <div class="action-button col-button">
                            <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
                              <img src="../assets/imgs/call_icon.png">
                            </a>
                            <span>{{ts.trPK('vacation-rule','call')}}</span>
                        </div>
                    </ion-col>
                    <ion-col [size]="4" (click)="getMenuEntries(employee)">
                      <div class="action-button col-button">
                          <span class="action-button-icon">
                            <img src="../assets/imgs/create_request_icon.png">
                          </span>
                          <span>{{ts.trPK('vacation-rule','create-request')}}</span>
                      </div>
                    </ion-col>
                    <ion-col [size]="4" style="opacity:0.3;">
                      <div class="action-button col-button">
                          <span class="action-button-icon">
                            <img src="../assets/imgs/message_icon.png">
                          </span>
                          <span>{{ts.trPK('vacation-rule','message-label')}}</span>
                      </div>
                    </ion-col>
            </ion-row>
        </div> -->
    </div>

    <!-- <div class="user-actions">
      <ion-segment
          (ionChange)="segmentChanged($event)"
          [value]="activeSegment">
          <ion-segment-button
              value="Attendance"
              [ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
              <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label>
              <img src="../assets/imgs/days.svg">
          </ion-segment-button>
          <ion-segment-button
              value="Team Members"
              [ngClass]="[activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment', empSubordinate.length === 0 ? 'disable-phone': '']">
              <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label>
              <img src="../assets/imgs/days.svg">
          </ion-segment-button>
          <ion-segment-button
              value="About"
              [ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
              <ion-label> Team Members</ion-label>
              <img src="../assets/imgs/profile.svg">
          </ion-segment-button>
          <ion-segment-button
          value="create-request"
          [ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
          <img src="../assets/imgs/create_request_icon.png">
          <ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label>
      </ion-segment-button>
      </ion-segment>
    </div> -->

    <!-- <div *ngIf="activeSegment === 'create-request'">
     
    </div> -->

    <div *ngIf="activeSegment === 'Attendance'">
      <div class="attendence">
        <p class="attendence-text">
          {{ts.trPK('myTeam','todayAttendance')}}
        </p>
        <ion-row style="margin: 0 -5px;">
          <ion-col [size]="4">
            <div class="attendance-information">
              <span style="color: green; ">{{ts.trPK('myTeam','check-in')}}</span>
              <h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
              <h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
            </div>
          </ion-col>
          <ion-col [size]="4">
            <div class="attendance-information">
              <span style="color: red; ">{{ts.trPK('myTeam','check-out')}}</span>
              <h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
              <h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
            </div>
          </ion-col>
          <ion-col [size]="4">
            <div class="attendance-information">
              <span>{{ts.trPK('myTeam','late')}}</span> 
              <h2>{{attendanceTrackingList.P_LATE_IN_HOURS | slice:0:-3}} </h2>
            </div>
          </ion-col>
        </ion-row>
         <!-- <ion-row *ngIf="attendanceTrackingList.stats == '' || attendanceTrackingList.stats == '' "> Hello </ion-row>
      </div> -->
      </div>

    
      
      <div *ngIf="showAttendence"  class="result-graph-attendence">
        <div style="margin-top: 8px;position: relative;
        display: flex;
        justify-content: space-between;">
          <ion-col [size]="8">
        <span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
          </ion-col>
          <ion-col [size]="4" style="text-align: end;">
            <button (click)="showCalender()" style="background: white; margin-left: 15px;">
              <label [ngClass]="direction == 'en' ? 'stats':'stats-ar' "    >{{ts.trPK('attendance-tracking','view-days')}}</label>
              <img  src="../assets/imgs/view-days.svg">
            </button>
          </ion-col>
       
      </div>

      <div class="header">
        <div>
          <div>
            <ion-row >
              <ion-slides [options]="slideOptsOne">
                <ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
                      <app-card-calendar
                        
                        [text]="filter.name"
                        [color]="filter.color"
                        [active]="filter.active"
                        (click)="activeFilter(i)"
                      ></app-card-calendar>
                  </ion-slide>
              </ion-slides>
            </ion-row>
           </div>
<!-- 
          <ion-row *ngIf="direction == 'en'">
            <ion-col [size]="2" style="text-align: left;">
              <ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
            </ion-col>
            <ion-col [size]="8" style="text-align: center;">
           
                <span class="month-year-span">{{month}} </span>
            </ion-col>
            <ion-col [size]="2" style="text-align: right;">
              <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
            </ion-col>
          </ion-row>

          <ion-row *ngIf="direction == 'ar'">
            <ion-col [size]="2" style="text-align: right;">
              <ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
            </ion-col>
            <ion-col [size]="8" style="text-align: center;">
           
                <span class="month-year-span">{{month}}</span>
            </ion-col>
            <ion-col [size]="2" style="text-align: left;">
              <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
            </ion-col>
          </ion-row> -->
        </div>
      </div>
      <div>
        <ion-row class="attendance-summary">
          <ion-col [size]="4">
            <div class="attendance-information">
              <span>{{ts.trPK('attendance-tracking','schedule')}}</span>
              <h2>{{timeCardSummaryData?.SCHEDULE_DAYS}}</h2>
            </div>
          </ion-col>
  
          <ion-col [size]="2">
            <div class="attendance-information">
              <span>{{ts.trPK('attendance-tracking','off-days')}}</span>
              <h2>{{timeCardSummaryData?.OFF_DAYS}}</h2>
            </div>
          </ion-col>
  
          <ion-col [size]="3">
            <div class="attendance-information">
              <span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
              <h2>{{timeCardSummaryData?.NOT_ANALYZED_DAYS}}</h2>
            </div>
          </ion-col>
  
          <ion-col [size]="3">
            <div class="attendance-information">
              <span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
              <h2>{{timeCardSummaryData?.SHORTAGE_HRS}}</h2>
            </div>
          </ion-col>
        </ion-row>
      </div>
        <div style=" position: relative;
        display: flex;
        justify-content: space-between;">
          <div>
          <div class="label-container">
            <ion-row>
                <label class="green-label-container"> </label>
                <span class="span-one">{{ts.trPK('attendance','present')}}</span>
                <span class="span-two">{{attendedDays}}</span>
            </ion-row>
          </div>
          <div class="label-container">
            <ion-row>
            <label class="blue-label-container"> </label>
               <span class="spa-one">{{ts.trPK('attendance','absent')}}</span>
              <span class="spa-two">{{absentDays}}</span>
            </ion-row>
          </div>
        </div>
          <div [ngClass]="direction == 'en' ? 'graph-container':'graph-container-ar' " >
            <div class="result-text-container">
                <h2>{{totalAttendancePrecentage}}</h2>
                <span>{{ts.trPK('absenceList','days')}}</span>
            </div>
            <p-chart [ngClass]="direction == 'en' ? 'today-graph':'today-graph-ar' "   type="doughnut" [data]="data" [options]="options" ></p-chart>
          </div>
        </div>
      </div>
   
     
        <!-- //////////////////////////////////CALENDAR/////////////////////////////////////////////////////// -->
     
      <div *ngIf="!showAttendence">
      <div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
        <div style="margin-top: 8px;position: relative;
        display: flex;
        justify-content: space-between;">
          <ion-col [size]="8">
        <span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
          </ion-col>
          <ion-col [size]="4" style="text-align: end;">
            <button (click)="showCalender()" [ngClass]="direction == 'en' ? 'statsIcon':'statsIcon-ar' "  >
              <label  [ngClass]="direction == 'en' ? 'stats':'stats-ar' "  >{{ts.trPK('attendance-tracking','view-stats')}}</label>
              <img  src="../assets/imgs/view-stats.svg">
            </button>
          </ion-col>
       
      </div>
    
      <div class="header">
        <div>
  
       <div>
        <ion-row >
          <ion-slides [options]="slideOptsOne">
              <ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
                  <app-card-calendar
                    [text]="filter.name"
                    [color]="filter.color"
                    [active]="filter.active"
                    (click)="activeFilter(i)"
                  ></app-card-calendar>
              </ion-slide>
          </ion-slides>
        </ion-row>
       </div>

          <!-- <ion-row *ngIf="direction == 'en'">
            <ion-col [size]="2" style="text-align: left;">
              <ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
            </ion-col>
            <ion-col [size]="8" style="text-align: center;">
            
                <span class="month-year-span">{{month}} </span>
            </ion-col>
            <ion-col [size]="2" style="text-align: right;">
              <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
            </ion-col>
          </ion-row>

          <ion-row *ngIf="direction == 'ar'">
            <ion-col [size]="2" style="text-align: right;">
              <ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
            </ion-col>
            <ion-col [size]="8" style="text-align: center;">
                
                <span class="month-year-span">{{month}}</span>
            </ion-col>
            <ion-col [size]="2" style="text-align: left;">
              <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
            </ion-col>
          </ion-row> -->
        </div>
      </div>
        <app-circle-calendar
          [currentDateParent]="currentDate"
          [dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
          (monthTitle)='changeMonthTitle($event)'
          (currentYear)=changeYear($event)>
        </app-circle-calendar>
      </div>
      </div>
    </div>

    <div *ngIf="activeSegment === 'TeamMembers'">
      <div class="MyTeamdiv">
        <div class="MyTeamtext" >{{ts.trPK('myTeam','my-team-members')}}</div>
        <div [ngClass]="direction == 'en' ? 'numberEmp':'numberEmp-ar' " >{{EmployeeTotal}}</div>
      </div>
      <!-- <div style="margin-top: -23px;">
        <ion-row>
        <ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
        <ion-col> <div [ngClass]="direction == 'en' ? 'number':'number-ar' ">
          <p class="numberEmp">{{EmployeeTotal}}</p></div></ion-col>
      </ion-row>
        
      </div> -->
      <!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
        <ion-row no-padding>
          <ion-col [size]="3" class="search-dropdown" no-padding>
              <ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
              [(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)">
                <ion-select-option value="Name" selected="true">{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
                <ion-select-option value="User Name">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
                <ion-select-option value="Email">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
            </ion-select>
          </ion-col>
          <ion-col [size]="7" class="input-container" no-padding>
            <ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
            <ion-input *ngIf="showUserNameOrNameInput" placeholder="Search" [(ngModel)]="searchNameOrUserName"></ion-input>
          </ion-col>
          <ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployeeTwo()">
            <ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
          </ion-col>
        </ion-row>  
      </div> -->
  
      <!-- <div *ngIf="isSearch">
        <ion-row class="search-container">
          <ion-col style="float: left;" size=[6] (click)="clearSearchTwo()">
              <span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span>
              <ion-icon name="close" ></ion-icon>
          </ion-col>
        </ion-row>
      </div>  -->
      
      <ng-container *ngFor="let subordinate of empSubordinate;let i=index">
          <app-employee-information
            [name]="subordinate.EMPLOYEE_NAME"
            [title]="subordinate.POSITION_NAME"
            [employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
            [employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER"
            (onGetDetails)="getDetails(i)">
          </app-employee-information>
      </ng-container>
      
  
      <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>

    <div class="employee-information-indetail" *ngIf="activeSegment === 'About'">
      <ion-row style="    padding-left: 13px;">
        <!-- <ion-col [size]="6" [ngStyle]="direction == 'en' ? {'border-right': '1px solid #ccc'} : {'border-left': '1px solid #ccc'}">
            <h2>{{ts.trPK('userProfile','empNo')}}</h2>
            <p>{{employee.EMPLOYEE_NUMBER}}</p>
        </ion-col> -->
        <ion-col>
          <p [ngClass]="direction == 'en' ? 'profile':'profile-ar' " >{{ts.trPK('userProfile','profile-details')}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' "  >{{ts.trPK('userProfile','category')}}</h2>
          <p [ngClass]="direction == 'en' ? 'label2':'label2-ar' " >{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','address')}}</h2>
          <p [ngClass]="direction == 'en' ? 'label2':'label2-ar' " style="line-height: 19px !important;">{{employee.LOCATION_NAME}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','phone-no')}}</h2>
          <p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.EMPLOYEE_MOBILE_NUMBER}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','busG')}}</h2>
          <p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.ORGANIZATION_NAME}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','job')}}</h2>
          <p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{jobName}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','payrol')}}</h2>
          <p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.PAYROLL_NAME}}</p>
        </ion-col>
        <!-- <ion-col [size]="12">
          <h2>{{ts.trPK('userProfile','orgEmail')}}</h2>
          <p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
        </ion-col> -->
        <ion-col [size]="12">
          <h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','position')}}</h2> 
          <p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{jobName}}</p>
        </ion-col>
        <ion-col [size]="12" style="border-bottom: none;">
          <h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','grade')}}</h2>
          <p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.GRADE_NAME}}</p>
        </ion-col>
      </ion-row>
    </div>

  </div>

</ion-content>