<section class="content">
  <div class="content-block">
    <div class="block-header">
      <div class="breadcrumb-main">
        <div class="row">
          <div class="col-md-6">
            <div class="mb-2">
              <span class="page-title">{{'USERS' | translate}}</span>
              <app-page-help-text [code]="'USERS'"></app-page-help-text>
            </div>
          </div>
          <div class="col-6" *hasClaim="'USER_CREATE_USER'">
            <ul class="breadcrumb-list">
              <li class="breadcrumb-item bcrumb-1">
                <a [routerLink]="['/users/manage']" class="btn btn-outline-success btn-sm">
                  <i-feather name="Plus" class="btn-success"></i-feather>
                  <span class="d-none d-sm-inline"> {{'ADD_USER' | translate}}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="card">
          <div class="body table-responsive">
            <div class="grid-height-large">
              <table mat-table [dataSource]="users" class="w-100">
                <ng-container matColumnDef="action">
                  <th 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">
                      <button mat-menu-item class="btn btn-light btn-sm" *hasClaim="'USER_EDIT_USER'"
                        (click)="editUser(user.id)">
                        <mat-icon>edit</mat-icon>
                        {{'EDIT' | translate}}
                      </button>
                      <button class="btn btn-light btn-sm" *hasClaim="'USER_DELETE_USER'" mat-menu-item
                        (click)="deleteUser(user)">
                        <mat-icon>delete</mat-icon>
                        {{'DELETE' | translate}}
                      </button>
                      <button class="btn btn-light btn-sm" *hasClaim="'USER_ASSIGN_PERMISSION'" mat-menu-item
                        (click)="userPermission(user.id)">
                        <mat-icon>people</mat-icon>
                        {{'PERMISSION' | translate}}
                      </button>
                      <button class="btn btn-light btn-sm" *hasClaim="'USER_RESET_PASSWORD'" mat-menu-item
                        (click)="resetPassword(user)">
                        <mat-icon>key</mat-icon>
                        {{'RESET_PASSWORD' | translate}}
                      </button>
                    </mat-menu>
                  </td>
                </ng-container>
                <ng-container matColumnDef="email">
                  <th mat-header-cell *matHeaderCellDef> {{'EMAIL' | translate}} </th>
                  <td mat-cell *matCellDef="let user"> {{user.email}} </td>
                </ng-container>
                <ng-container matColumnDef="firstName">
                  <th mat-header-cell *matHeaderCellDef> {{'FIRST_NAME' | translate}} </th>
                  <td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
                </ng-container>
                <ng-container matColumnDef="lastName">
                  <th mat-header-cell *matHeaderCellDef> {{'LAST_NAME' | translate}} </th>
                  <td mat-cell *matCellDef="let user"> {{user.lastName}} </td>
                </ng-container>
                <ng-container matColumnDef="phoneNumber">
                  <th mat-header-cell *matHeaderCellDef> {{'MOBILE_NUMBER' | translate}} </th>
                  <td mat-cell *matCellDef="let user"> {{user.phoneNumber}} </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="loading-shade" *ngIf="isLoadingResults">
  <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
</div>