 <!-- table of users -->
 <div class="mat-elevation-z8 col-12 col-lg-12 mb-5   justify-content-center ">
    <table mat-table [dataSource]="users">


      <!-- lastname firstname -->
      <ng-container matColumnDef="lastname">
        <th mat-header-cell *matHeaderCellDef> Nom </th>
        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.lastname}} </td>
      </ng-container>

      <!-- firstname Column -->
      <ng-container matColumnDef="firstname">
        <th mat-header-cell *matHeaderCellDef> Prénom </th>
        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.firstname}} </td>
      </ng-container>

      <!-- email Column -->
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef> Adresse email </th>
        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.email}} </td>
      </ng-container>

       <!-- details -->
      <ng-container matColumnDef="details">
        <th mat-header-cell *matHeaderCellDef> Détails </th>
        <td mat-cell *matCellDef="let element"  class="text-left">
          <button mat-icon-button color="primary" (click)="detailUser(element)">
              <mat-icon class="mat-18">reorder</mat-icon>
          </button>
        </td>
      </ng-container>

       <!-- update -->
      <ng-container matColumnDef="update">
        <th mat-header-cell *matHeaderCellDef> Modifier </th>
        <td mat-cell *matCellDef="let element"  class="text-left">
          <button mat-icon-button color="accent" class="update" (click)="editUser(element)">
              <mat-icon class="mat-18">system_update</mat-icon>
          </button>
        </td>
      </ng-container>

      <!-- bloque -->
      <ng-container matColumnDef="bloque">
        <th mat-header-cell *matHeaderCellDef> Bloquer </th>
        <td mat-cell *matCellDef="let element"  class="text-left">
          <button *ngIf="element.isActive" mat-icon-button color="warn" (click)="bloqueUser(element)">
              <mat-icon class="mat-18">not_interested</mat-icon>
          </button>
        </td>
      </ng-container>

       <!-- delete -->
      <ng-container matColumnDef="delete">
          <th mat-header-cell *matHeaderCellDef> Supprimer </th>
          <td mat-cell *matCellDef="let element"  class="text-left">
            <button mat-icon-button color="warn" (click)="deleteUser(element)">
                <mat-icon class="mat-18">delete</mat-icon>
            </button>
          </td>
        </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>


   

    <mat-paginator [length]="total" [pageSize]="pageSize" [pageSizeOptions]="[5,10,20,50]" [showFirstLastButtons]="true"
      (page)="handlePage($event)">
    </mat-paginator>
    
  </div>
