<app-generic-header
  showBack="true"
  backLink="/home"
  [headerText]="'myTeam, myTeam-header' | translate">
</app-generic-header>


<ion-content>
  <div class="contentBg">
    <div class="result-graph">
      <div class="request-heading">
        <span>{{ts.trPK('myTeam','search-by')}}</span>
      </div>
      <div>
        <ion-row class="custom-radio">
          <!-- <ion-col [size]="3" class="search-dropdown" no-padding> -->
            <ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" class="radio-list" style="display: flex;">
            
              <ion-item lines='none' style="--background: white" >
                <ion-radio mode="md" value="Name" [checked]="this.searchKeySelect === 'Name'" [color]="myColor" >{{ts.trPK('searchForReplacment','name')}}</ion-radio>
                <ion-label class="text-label" >{{ts.trPK('searchForReplacment','name')}}</ion-label>  
              </ion-item>
              
              <ion-item lines='none' style="--background: white" class="ion-no-padding">
                <ion-radio mode="md" value="User Name" [checked]="this.searchKeySelect === 'User Name'" [color]="myColor"  >{{ts.trPK('searchForReplacment','userName')}}</ion-radio>
                <ion-label class="text-label">{{ts.trPK('searchForReplacment','userName')}}</ion-label>  
              </ion-item>
              
              <ion-item lines='none' style="--background: white" class="ion-no-padding">
                <ion-radio mode="md" value="Email" [checked]="this.searchKeySelect === 'Email'" [color]="myColor"  >{{ts.trPK('searchForReplacment','email')}}</ion-radio>
                <ion-label class="text-label">{{ts.trPK('searchForReplacment','email')}}</ion-label>  
              </ion-item>
              
            </ion-radio-group>
        </ion-row>
        <!-- <ion-row>
          <ion-input placeholder="Search by" class="search-label"[(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" ></ion-input>
       </ion-row> -->
       <ion-row>
       <ion-col  >
         <div (ionChange)="searchEmployee($event)" class="search-label">
        <ion-input *ngIf="showEmailInput" placeholder="Search by Email" [(ngModel)]="searchEmail"  pattern="email"  ></ion-input>
        <ion-input *ngIf="showUserNameOrNameInput" placeholder ="Search by Name" [(ngModel)]="searchNameOrUserName"  ></ion-input>
        <ion-input *ngIf="showUserNameInput" placeholder ="Search by Username" [(ngModel)]="searchUserName" ></ion-input>
         </div>
         <div *ngIf="isSearch" (click)="clearSearch()" class="search-container">
            <ion-col style="float: right;"  >
                <ion-icon name="close" ></ion-icon>
            </ion-col>
        </div>
      </ion-col>
    </ion-row>
      </div>
      <!-- <div class="result-text-container">
          <h2>{{totalEmployees}}</h2>
          <span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
         
      </div> --> 
  </div>
  <div class="div">
    <div class="text" >{{ts.trPK('myTeam','my-team-members')}}</div>
    <div [ngClass]="direction == 'en' ? 'numberEmp':'numberEmp-ar' ">{{EmployeeTotal}}</div>
  </div>
  <!-- <div>
    <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 class="result-graph">
      <div class="request-heading">
        <span>{{ts.trPK('myTeam','team-stats')}}</span>
      </div>
      <div class="result-text-container">
          <h2>{{totalEmployees}}</h2>
          <span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
         
      </div>
      <p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
  </div> -->

    <!-- <ion-row class="filters-row">
      <ion-slides [options]="slideOptsOne">
          <ion-slide *ngFor="let filter of filters;  let i=index">
              <app-card-filter
                [value]="filter.value"
                [text]="filter.name"
                [color]="filter.color"
                [active]="filter.active"
                (click)="activeFilter(i)"
              ></app-card-filter>
          </ion-slide>
      </ion-slides>
    </ion-row> -->

    <!-- <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 ="{{ts.trPK('general','search')}}" [(ngModel)]="searchNameOrUserName"></ion-input>
        </ion-col> 
        
      
        
         <ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()">
          <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)="clearSearch()">
            <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>

  </div>

   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content> 



 
 