<section class="content-header">
  <h2 translate class="subheader-title">
      <span class="subheader-icon fal fa-users"></span> User Master
  <small> </small>
  </h2>
</section>
<section class="content">
<div class="box padding-15" style="display: block;">
<div class="row">
  <div class="col-sm-8 col-md-9">
    <div class="dataTables_length" id="datatable_length">
     <button *ngIf="add==true" type="button" routerLink="/masters/useradd" matbutton 
     class="btn btn-outline-primary waves-effect waves-themed btn-sm">
     <span class="fal fa-plus"></span>&nbsp; Add New</button>
     &nbsp; &nbsp; <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
       <i class="fal fa-chart-area"></i> Go back to dashboard</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search..." [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}" aria-label="Search">
      <span class="input-group-append">
          <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
            <span class="fal fa-search"></span>
          </button>
      </span>
    </div>
  </div>
</div>
<div class="box-body">
<div class="table-responsive">
  <table class="table table-bordered table-condensed table-hover table-striped">
    <thead class="headings">
      <tr>
        <th class="sno_width">#</th>
        <th class="action_width">
          <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
          <span *ngIf="showall==false" class="img-showactive" style="cursor:pointer;" (click)="getactiveinactive(false)" title="Show all"></span>
          <span *ngIf="showall==true" class="img-showall" style="cursor:pointer;" (click)="getactiveinactive(true)" title="Show only active"></span>
        </th>
        <th class="pointer" (click)="sort('firstname')">
          First Name
          <i *ngIf="key =='firstname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <th class="pointer" (click)="sort('lastname')">
          Last Name
          <i *ngIf="key =='lastname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <th class="pointer" (click)="sort('emailid')">
          Email ID
          <i *ngIf="key =='emailid'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <th class="pointer" (click)="sort('empid')">
          Employee ID
          <i *ngIf="key =='empid'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
<th class="pointer" (click)="sort('department')">
          Department
          <i *ngIf="key =='department'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <th class="pointer" (click)="sort('location')">
          Location
          <i *ngIf="key =='location'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <!-- <th class="pointer" (click)="sort('tat_mapping')">
          Tat Mapping
          <i *ngIf="key =='tat_mapping'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <th class="pointer" (click)="sort('usermailfoldername')">
          User Mail Folder Name
          <i *ngIf="key =='usermailfoldername'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th> -->
        <th class="pointer" (click)="sort('createdbyname')">
          Created By
          <i *ngIf="key =='createdbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <th class="pointer" (click)="sort('createdon')">
          Created Date
          <i *ngIf="key =='createdon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <th class="pointer" (click)="sort('updatedbyname')">
          Last Modified By
          <i *ngIf="key =='updatedbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
        <th class="pointer" (click)="sort('updatedon')">
          Last Modified Date
          <i *ngIf="key =='updatedon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
        </th>
      </tr>
    </thead>
    <tbody>

      <tr *ngFor="let user of UserList| orderBy: key : reverse |filter:searchText |paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
        <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
        <td *ngIf="(edit==true || delete==true)">
          <span class="fal fa-pencil blue" style="cursor:pointer;" *ngIf="edit==true" (click)="calluseradd(user.userid)">
          </span>&nbsp;&nbsp;
          <span *ngIf="user.active==1 && delete==true && user.userid!=useridnew" class="img-active" style="cursor:pointer;"
                (click)="OpenConfirmTemplate(user)" title="Active"></span>
          <span *ngIf="user.active==0 && delete==true && user.userid!=useridnew" class="img-inactive" style="cursor:pointer;"
                (click)="OpenConfirmTemplate(user)" title="Inactive"></span>
        </td>
        <td>{{user.firstname}}</td>
        <td>{{user.lastname}}</td>
        <td>{{user.emailid}}</td>
        <td>{{user.empid}}</td>
     <td>{{user.department}}</td>
        <td>{{user.location}}</td>
        <!-- <td>{{user.tat_mapping}}</td>
        <td>{{user.usermailfoldername}}</td> -->
        <td>{{user.createdbyname}}</td>
          <td>{{user.createdon | date:'MM-dd-yyyy'}}</td>
          <td>{{user.updatedbyname}}</td>
          <td>{{user.updatedon | date:'MM-dd-yyyy'}}</td>						  
      </tr>
      <tr *ngIf=" UserList.length==0 || (UserList |filter:searchText).length === 0">
        <td colspan="11" style="text-align:center;">No Records Found</td></tr>

    </tbody>
  </table>
  <div *ngIf="UserList && UserList.length!=0" class="pull-right">
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
  </div>
</div>
</div>
</div>
</section>
<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
</ngx-spinner>
