<!-- <ion-header no-shadow no-border>
  <ion-toolbar>
      <nav-buttons [enableMenu]="true" [enableBack]="false" [navigate]="false"></nav-buttons>
      <ion-title>home </ion-title>
      <ion-badge id="homeBadgeBtn" item-end>{{notBadge}}</ion-badge>
  </ion-toolbar>
</ion-header> -->
<ion-content class="colorBG">
  <div class="header-div">
    <button ion-button icon-only menuToggle class="menubutton" (click)="openMenu()">
      <img class="menuImg" src="../assets/imgs/home/burgerMenu.png"/>
      <ion-badge id="homeBadgeBtn" slot="end" color="danger">{{notBadge}}</ion-badge>
    </button>
    <button ion-button icon-only menuToggle class="menubuttonTrans" (click)="openMenu()">
      <img class="transImg" src="../assets/imgs/home/arabicSwitch.png"/>
    </button>
    <div class="centerDiv homeBox" (click)="openPersonalInfo()">
    <p class="TxtPlace">{{ts.trPK('home','hello')}}, {{userData.EMPLOYEE_DISPLAY_NAME}}</p>
    <div class="profileDiv">
      <!-- <ion-img class="profileImg" src="{{user_image}}"></ion-img> -->
      <img class="profileImg" [src]="user_image">

    </div>
    

  </div>
  <div class="changeImgBtn">
       <button ion-button icon-only menuToggle class="menubutton" (click)="changeImage()">
      <ion-icon class="changeIcon" name="camera"></ion-icon></button> 
 
<!-- <app-file-uploder-profile  >

</app-file-uploder-profile>
    -->
    <!-- <file-uploader (fileSelected)="attachmentSelected($event)" [maxFileSize]="maxFileSize" [multiupload]="false"></file-uploader>  -->


  </div>
  </div>

  <div>
    <div>
      <p  class="dash-header text-caps">{{ts.trPK('home','dashboard')}}</p>
    </div>
    <div>
      <ion-grid  class="cus-grid">
          <ion-row>
              <ion-col size="6" class="col-grid" *ngFor="let item of menuList; let i=index">
                <button ion-button block class="serviceItem" (click)="getMeunDetails(i)">
                  <img class="serviceItemImg" src="../assets/imgs/{{item.MENU_TYPE}}.png"/>
                  <p> {{ item.MENU_NAME }} {{item.SUB_MENU_NAME}}</p>
                </button>
              </ion-col>
              <ion-col size="6" class="col-grid">
                <button ion-button block class="serviceItem" (click)="getDeviceLocation()">
                  <ion-img class="serviceItemImg" src="../assets/imgs/home/attendanceSwipe.png"></ion-img>
                  <p>{{ts.trPK('attendance','attendance')}}</p>
                </button>
              </ion-col>
              <ion-col size="6" class="col-grid" >
                  <button ion-button block class="serviceItem" id="vacationRule" (click)="Vacation_Rule()">
                    <ion-img class="serviceItemImg" src="../assets/imgs/home/vacationRule.png"></ion-img>
                    <p>{{ts.trPK('vacation-rule','vacationRule')}}</p>
                  </button>
                </ion-col>
              <ion-col size="6" class="col-grid">
                <button ion-button block class="serviceItem" id="accrualBalance" (click)="accrualBalance()">
                  <ion-img class="serviceItemImg" src="../assets/imgs/home/accrualBalances.png"></ion-img>
                  <p>{{ts.trPK('absenceList','accrualBalances')}}</p>
                </button>
              </ion-col>
           
          <ion-col size="6" class="col-grid">
            <button ion-button block class="serviceItem" (click)="Change_password()">
              <ion-img class="serviceItemImg" src="../assets/imgs/home/changePasword.png"></ion-img>
              <p>{{ts.trPK('changePassword','changePassword')}}</p>
            </button>
          </ion-col>

          <ion-col size="6" class="col-grid">
            <button ion-button block class="serviceItem" (click)="openPayslip()">
              <ion-img class="serviceItemImg" src="../assets/imgs/home/paySlip.png"></ion-img>
              <p>{{ts.trPK('login','payslip')}}</p>
            </button>
          </ion-col>

          <ion-col size="6" class="col-grid">
            <button ion-button block class="serviceItem" (click)="Change_password()">
              <ion-img class="serviceItemImg" src="../assets/imgs/home/announcements.png"></ion-img>
              <p>{{ts.trPK('login','announcement')}}</p>
            </button>
          </ion-col>
          <ion-col size="6" class="col-grid">
            <button ion-button block class="serviceItem" (click)="Change_password()">
              <ion-img class="serviceItemImg" src="../assets/imgs/home/timeAttendance.png"></ion-img>
              <p>{{ts.trPK('home','timeAndAttendance')}}</p>
            </button>
          </ion-col>
          
          <!-- <ion-col size="6" class="col-grid">
            <button ion-button block class="serviceItem" (click)="openPayslip()">
              <ion-img class="serviceItemImg" src="../assets/imgs/changepass.png"></ion-img>
              <p>{{ts.trPK('payslip','title')}}</p>
            </button>
          </ion-col> -->
        </ion-row>

            <!-- <button class="menu-item" ion-item  menuClose ion-item *ngFor="let item of menuList; let i=index" (click)="getMeunDetails(i)" >
          <img width="30" src="../assets/imgs/arrownew.png" item-left  class="flipImg">
          {{ item.MENU_NAME }} {{item.SUB_MENU_NAME}}
        </button>   -->

      </ion-grid>
    </div>
  </div>

</ion-content>
