<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- Left-hand side: Title -->
      <div class="col-md-6 mb-2">
        <span class="mb-0 page-title">{{'USERS' | translate}}</span>
        <app-page-help-text [code]="'USERS'"></app-page-help-text>
      </div>
      <!-- Right-hand side: Buttons -->
      <div class="col-md-6 d-flex justify-content-end mb-2">
        <button *hasClaim="'user_add'" class="btn btn-success btn-sm" [routerLink]="['/users/manage']">
          <i-feather name="plus"></i-feather>
          {{ 'ADD_USER' | translate }}
        </button>
      </div>
    </div>
    <div class="card">
      <div class="header">
        <div class="col-sm-5">
          <input class="form-control" placeholder="{{'SEARCH_BY_USERNAME' | translate}}" #input>
        </div>
      </div>
      <div class="body">
        <div class="table-responsive">
          <div class="grid-height-medium">
            <table mat-table [dataSource]="dataSource" matSort matSortActive="email" matSortDirection="asc">
              <ng-container matColumnDef="action">
                <th class="table-column-fix-30" mat-header-cell *matHeaderCellDef>
                  <span> {{'ACTION' | translate}} </span>
                </th>
                <td mat-cell *matCellDef="let user">
                  <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Action">
                    <mat-icon>more_vert</mat-icon>
                  </button>
                  <mat-menu #menu="matMenu">
                    <ng-container *ngIf="!user.isDeleted">
                      <button mat-menu-item class="btn btn-light btn-sm" *hasClaim="'user_edit'"
                        (click)="editUser(user.id)">
                        <mat-icon>edit</mat-icon>
                        {{'EDIT' | translate}}
                      </button>
                    </ng-container>
                    <button class="btn btn-light btn-sm" *hasClaim="['user_delete','user_edit']" mat-menu-item
                    (click)="deleteUser(user)">
                    <mat-icon>power_settings_new</mat-icon>
                    {{(user.isActive ? 'IN_ACTIVE' : 'ACTIVATE') | translate}}
                  </button>
                    <!-- <button class="btn btn-light btn-sm" *hasClaim="''" mat-menu-item
                     (click)="deleteUser(user)">
                     <mat-icon>power_settings_new</mat-icon> <span class="ml-1">{{'IN_ACTIVE' | translate}}</span>
                    </button> -->
                    <ng-container *ngIf="!user.isDeleted">
                      <button class="btn btn-light btn-sm" *hasClaim="'user_permission_edit'" mat-menu-item
                        (click)="userPermission(user.id)">
                        <mat-icon>people</mat-icon>
                        {{'PERMISSION' | translate}}
                      </button>
                    </ng-container>
                    <ng-container *ngIf="!user.isDeleted">
                      <button class="btn btn-light btn-sm" *hasClaim="'reset_password_edit'" mat-menu-item
                        (click)="resetPassword(user)">
                        <mat-icon>key</mat-icon>
                        {{'RESET_PASSWORD' | translate}}
                      </button>
                    </ng-container>
                  </mat-menu>
                </td>
              </ng-container>
              <ng-container matColumnDef="email">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'EMAIL' | translate}} </th>
                <td mat-cell *matCellDef="let user"> {{user.email}} </td>
              </ng-container>
              <ng-container matColumnDef="firstName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'FIRST_NAME' | translate}} </th>
                <td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
              </ng-container>
              <ng-container matColumnDef="lastName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'LAST_NAME' | translate}} </th>
                <td mat-cell *matCellDef="let user"> {{user.lastName}} </td>
              </ng-container>
              <ng-container matColumnDef="phoneNumber">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'MOBILE_NUMBER' | translate}} </th>
                <td mat-cell *matCellDef="let user"> {{user.phoneNumber}} </td>
              </ng-container>

              <ng-container matColumnDef="isActive">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'STATUS' | translate}} </th>
                <td mat-cell *matCellDef="let user">
                  <span *ngIf="user.isActive" class="badge bg-success">{{'ACTIVE' | translate}}</span>
                  <span *ngIf="!user.isActive" class="badge bg-warning">{{'INACTIVE' | translate}}</span>
                </td>
              </ng-container>
              <!-- <ng-container matColumnDef="isDeleted">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'STATUS' | translate}} </th>
                <td mat-cell *matCellDef="let user">
                  <ng-container *ngIf="!user.isDeleted">
                    <span class="badge bg-success">{{'ACTIVE' | translate}}</span>
                  </ng-container>
                  <ng-container *ngIf="user.isDeleted">
                    <span class="badge bg-danger">{{'IN_ACTIVE' | translate}}</span>
                  </ng-container>
                </td>
              </ng-container> -->

              <ng-container matColumnDef="action-search">
                <th mat-header-cell *matHeaderCellDef>
                </th>
              </ng-container>
              <ng-container matColumnDef="email-search">
                <th mat-header-cell *matHeaderCellDef>
                
                </th>
              </ng-container>
              <ng-container matColumnDef="first-name-search">
                <th mat-header-cell *matHeaderCellDef>
                 
                </th>
              </ng-container>
              <ng-container matColumnDef="last-name-search">
                <th mat-header-cell *matHeaderCellDef>
                 
                </th>
              </ng-container>
              <ng-container matColumnDef="phone-number-search">
                <th mat-header-cell *matHeaderCellDef>
                
                </th>
              </ng-container>
              <ng-container matColumnDef="is-active-search">
                <th mat-header-cell *matHeaderCellDef>
                  <mat-slide-toggle [formControl]="isActiveSearchFilterCtl" color="primary">
                  </mat-slide-toggle>
                </th>
              </ng-container>
              
              <ng-container matColumnDef="footer">
                <td mat-footer-cell colspan="6" *matFooterCellDef>
                  <mat-paginator [length]="userResource.totalCount" [pageSize]="userResource.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
              <tr mat-header-row
              *matHeaderRowDef="['action-search','email-search','first-name-search','last-name-search','phone-number-search','is-active-search'];sticky: true">
            </tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
              <tr mat-footer-row *matFooterRowDef="footerToDisplayed;sticky: true"></tr>
              <tr *matNoDataRow>
                <td>
                  <div class="m-2">
                    <b> {{'NO_DATA_FOUND' | translate}}</b>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
