<div class="action-bar">
  <button *ngIf="canEditEmployee" mat-raised-button color="accent" routerLink="/employee/add">Ajouter</button>
</div>

<table class="mx-auto" *ngIf="employees$ | async as employees" mat-table multiTemplateDataRows [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="name">
    <th mat-header-cell *matHeaderCellDef>Nom</th>
    <td mat-cell *matCellDef="let employee">{{employee.firstName}} {{employee.lastName}}</td>
  </ng-container>
  <ng-container matColumnDef="group">
    <th mat-header-cell *matHeaderCellDef>Groupe</th>
    <td mat-cell *matCellDef="let employee">
      <ng-container *ngIf="employee.group">{{employee.group.name}}</ng-container>
      <ng-container *ngIf="!employee.group">Aucun</ng-container>
    </td>
  </ng-container>
  <ng-container matColumnDef="lastLogin">
    <th mat-header-cell *matHeaderCellDef>Dernière connexion</th>
    <td mat-cell *matCellDef="let employee">
      <ng-container *ngIf="employee.lastLoginTime">{{getDate(employee.lastLoginTime).toLocaleString()}}</ng-container>
      <ng-container *ngIf="!employee.lastLoginTime">Jamais</ng-container>
    </td>
  </ng-container>
  <ng-container matColumnDef="permissionCount">
    <th mat-header-cell *matHeaderCellDef>Permissions</th>
    <td mat-cell *matCellDef="let employee">
      <ng-container *ngIf="employee.permissions">{{employee.permissions.length}}</ng-container>
      <ng-container *ngIf="!employee.permissions">0</ng-container>
    </td>
  </ng-container>
  <ng-container matColumnDef="editButton">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell [class.disabled]="!canEditEmployee" *matCellDef="let employee">
      <button mat-raised-button color="accent" routerLink="/employee/edit/{{employee.id}}">Modifier</button>
    </td>
  </ng-container>
  <ng-container matColumnDef="editPasswordButton">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell [class.disabled]="!canEditEmployeePassword" *matCellDef="let employee">
      <button mat-raised-button color="accent" routerLink="/employee/password/edit/{{employee.id}}">Modifier mot de passe</button>
    </td>
  </ng-container>

  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let employee" [attr.colspan]="columns.length">
      <div class="entity-detail"
           [@detailExpand]="employee == expandedElement ? 'expanded' : 'collapsed'">
        <cre-permissions-list [employee]="employee" class="w-100"></cre-permissions-list>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columns"></tr>
  <tr
    mat-row
    *matRowDef="let employee; columns: columns"
    class="entity-row can-expand"
    [class.expanded-row]="expandedElement === employee"
    (click)="expandedElement = expandedElement === employee ? null : employee">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
</table>
