<ion-app [dir]="direction">
  <ion-split-pane>
      <ion-menu [swipeGesture]="false" side='start' *ngIf="direction ==='ltr'">
        <ion-content class="sidebar-menu">
          <div class="header-div">
            <div>
              <ion-button class="closeIcon"  (click)="closeMenu()">
                <img  style= "height: 18px !important;"  src="../assets/imgs/close_menu_icon.png "></ion-button>
            </div>
            <div style="border-bottom: rgb(190, 186, 186) solid 1px;" > 
              <img class="mohemmLogo" src="../assets/imgs/menu_mohemm_logo.png" >
            </div>
            <hr> 
          </div>

          <div class="centerDiv homeBox">
            <div class="profileDiv">
              <img class="profileImg"  [src]="user_image">
              <p class="TxtPlace">{{User_name_Emp}}</p>
              <p class="TxtPlaces"> {{User_Job_name}}</p>
            </div>
          </div>
  
          <div   style="border-bottom: rgb(190, 187, 187) solid 1px;" >
            <button class="logout" ion-button  (click)="logout();" > {{ts.trPK('home','logout')}}</button>
          </div>
          <br> 

          <ion-list class="list-en" >
            <ion-item (click)="profile()">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 24px !important;"  src="../assets/imgs/profile_icon.png" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{ts.trPK('userProfile','title')}}
              </ion-label>
            </ion-item>
            <ion-item (click)="performanceEvaluation()">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 24px !important;"  src="../assets/icon/bar-chart.svg" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{ts.trPK('userProfile','performance-evaluation')}}
              </ion-label>
            </ion-item>
            <ion-item [hidden]="TeamFlag!='true'" (click)="openMyTeamPage()">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 14px !important;"  src="../assets/imgs/my_team_icon.png" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{ts.trPK('myTeam','myTeam-header')}}
              </ion-label>
            </ion-item>

            <ion-item  (click)="openMyRequestPage()">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 20px !important;"  src="../assets/imgs/hr-request.png" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{ts.trPK('userProfile','HR-Request')}}
              </ion-label>
            </ion-item>
            <div *ngFor="let menu of menuList">
            
            <ion-item (click)="oepnMyRequest(menu)"  *ngIf="menu.REQUEST_GROUP_NAME =='MBL_RG_01' && menu.MENU_TYPE =='E'">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 20px !important;"  src="../assets/imgs/my-request.png" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{menu.MENU_NAME}}
              </ion-label>
            </ion-item>
          </div>

          <ion-item (click)="oepnTransaction()">
            <ion-thumbnail slot="start" class="menu-thumb">
              <img style= "height: 20px !important;"  src="../assets/imgs/pending-transaction.png" item-left>
            </ion-thumbnail>
            <ion-label class="profile">
              {{ts.trPK('general','pending-transaction')}}
            </ion-label>
          </ion-item>

            <!-- <ion-item (click)="openChangePassword()"> -->
              <ion-item (click)="openChangePassword()"> 
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left>
              </ion-thumbnail>
              <ion-label class="changepassword" >
                {{ts.trPK('login','changepassword')}}
                <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
              </ion-label>
            </ion-item>

            <ion-item (click)="openDigitalId()"> 
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 25px !important;" src="../assets/imgs/ID_ico_menu.png" item-left>
              </ion-thumbnail>
              <ion-label class="changepassword" >
                {{ts.trPK('general','digital-id')}}
                <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
              </ion-label>
            </ion-item>

            <ion-item *ngIf='userInfo?.show_business' (click)="openBusinessCard()"> 
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 25px !important;" src="../assets/imgs/business-card-design.png" item-left>
              </ion-thumbnail>
              <ion-label class="changepassword" >
                {{ts.trPK('general','business-card')}}
                <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
              </ion-label>
            </ion-item>
  
          </ion-list>

          <div class="" style="text-align:center">
             <img src="{{companyUrl}}" class="CompanyImg logoImg">
            <!-- <p class="companyTxt">{{companyDesc}}</p> -->
          </div>
          <div  class="menuFooter" >
            <div> <img src="../assets/imgs/CSLogo.png"  class="CompanyImg"  ></div>
            <p class="companyTxt">{{companyDesc}}</p>
          </div>
        </ion-content>
      </ion-menu>

      <ion-menu [swipeGesture]="false" side='end' *ngIf="direction ==='rtl'">
        <ion-content class="sidebar-menu">
          <div class="header-div">
            <div>
              <ion-button class="closeIcon"  (click)="closeMenu()">
                <img  style= "height: 18px !important;"  src="../assets/imgs/close_menu_icon.png "></ion-button> 
            </div>
            <div style="border-bottom: rgb(190, 186, 186) solid 1px;" > 
              <img class="mohemmLogo-ar" src="../assets/imgs/menu_mohemm_logo.png" >
            </div>
            <hr> 
          </div>
          <div class="centerDiv homeBox">
            <div class="profileDiv-ar">
              <img class="profileImg" [src]="user_image">
              <p class="TxtPlace">{{User_name_Emp}}</p>
              <p class="TxtPlaces"> {{User_Job_name}}</p>
            </div>
          </div>

          <div   style="border-bottom: rgb(190, 187, 187) solid 1px;" >
            <button class="logout-ar" ion-button  (click)="logout();" > {{ts.trPK('home','logout')}}</button>
          </div>
          <br>

          <ion-list class="list-ar" >
            <ion-item (click)="profile()">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 24px !important;"  src="../assets/imgs/profile_icon.png" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{ts.trPK('userProfile','title')}}
              </ion-label>
            </ion-item>
            <ion-item [hidden]="TeamFlag!='true'" (click)="openMyTeamPage()">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 14px !important;"  src="../assets/imgs/my_team_icon.png" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{ts.trPK('myTeam','myTeam-header')}}
              </ion-label>
            </ion-item>
            <ion-item  (click)="openMyRequestPage()">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 14px !important;"  src="../assets/imgs/my_team_icon.png" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{ts.trPK('userProfile','HR-Request')}}
              </ion-label>
            </ion-item>
            <div *ngFor="let menu of menuList">
            
              <ion-item (click)="oepnMyRequest(menu)"  *ngIf="menu.REQUEST_GROUP_NAME =='MBL_RG_01' && menu.MENU_TYPE =='E'">
                <ion-thumbnail slot="start" class="menu-thumb">
                  <img style= "height: 20px !important;"  src="../assets/imgs/my-request.png" item-left>
                </ion-thumbnail>
                <ion-label class="profile">
                  {{menu.MENU_NAME}}
                </ion-label>
              </ion-item>
            </div>
  
            <ion-item (click)="oepnTransaction()">
              <ion-thumbnail slot="start" class="menu-thumb">
                <img style= "height: 20px !important;"  src="../assets/imgs/pending-transaction.png" item-left>
              </ion-thumbnail>
              <ion-label class="profile">
                {{ts.trPK('general','pending-transaction')}}
              </ion-label>
            </ion-item>
            <ion-item (click)="openChangePassword()"> 
            <ion-thumbnail slot="start" class="menu-thumb">
              <img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left>
            </ion-thumbnail>
            <ion-label class="changepassword" >
              {{ts.trPK('login','changepassword')}}

              <ion-badge  [ngClass]=" direction === 'rtl' ?  'end-badge' : 'start-badge'" slot="end" color="danger" class="main-badge">{{notBadge}}</ion-badge>
            </ion-label>
            <!-- <button class="menu-item" ion-item  menuClose ion-item  (click)="goToWorkListPage()" >
               
               
            
            </button> -->
          </ion-item>

          <ion-item (click)="openDigitalId()"> 
            <ion-thumbnail slot="start" class="menu-thumb">
              <img style= "height: 25px !important;" src="../assets/imgs/ID_ico_menu.png" item-left>
            </ion-thumbnail>
            <ion-label class="changepassword" >
              {{ts.trPK('general','digital-id')}}
              <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
            </ion-label>
          </ion-item>

          <ion-item *ngIf='userInfo?.show_business' (click)="openBusinessCard()"> 
            <ion-thumbnail slot="start" class="menu-thumb">
              <img style= "height: 25px !important;" src="../assets/imgs/business-card-design.png" item-left>
            </ion-thumbnail>
            <ion-label class="changepassword" >
              {{ts.trPK('general','business-card')}}
              <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
            </ion-label>
          </ion-item>
         
          <!-- <ion-item (click)="profile()">
            <ion-thumbnail slot="start" class="menu-thumb">
              <img width="30" src="../assets/imgs/profile_icon.png" item-left>
            </ion-thumbnail>
            <ion-label>
              {{ts.trPK('userProfile','title')}}
            </ion-label>
          </ion-item> -->
          <!-- <ion-item (click)="logout();">


            <ion-thumbnail slot="start" class="menu-thumb">
              <img width="30" src="../assets/imgs/signout.png" item-left>
            </ion-thumbnail>
            <ion-label>
              {{ts.trPK('home','logout')}}
            </ion-label>

          </ion-item> -->
        </ion-list>

        <div class="" style="text-align:center">
           <img src="{{companyUrl}}" class="CompanyImg" [ngClass]="TeamFlag!='true'? 'logoImg':'logoImgWithMyTeam'">
          <!-- <p class="companyTxt">{{companyDesc}}</p> -->
        </div>
        <div class="menuFooter">
          <div> <img src="../assets/imgs/CSLogo.png" class="CompanyImg" ></div>
          <p class="companyTxt">{{companyDesc}}</p>
        </div>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>

</ion-app>