<ng-container *ngIf="employees$ | async as employees">
  <table class="my-3 mx-auto mat-elevation-z1" *ngIf="employees.length > 0" mat-table [dataSource]="employees">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>Numéro d'employé</th>
      <td mat-cell *matCellDef="let employee">{{employee.id}}</td>
    </ng-container>
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef>Prénom</th>
      <td mat-cell *matCellDef="let employee">{{employee.firstName}}</td>
    </ng-container>
    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef>Nom</th>
      <td mat-cell *matCellDef="let employee">{{employee.lastName}}</td>
    </ng-container>
    <ng-container matColumnDef="edit">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell [class.disabled]="!canEditEmployee" *matCellDef="let employee">
        <button mat-raised-button color="accent">Modifier</button>
      </td>
    </ng-container>

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

  <ng-container *ngIf="employees.length <= 0">
    <div class="w-100 mt-2 text-center empty">
      <p>Il n'y a aucun employé dans ce groupe</p>
    </div>
  </ng-container>
</ng-container>
