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

<table *ngIf="groups$ | async as groups" mat-table class="mx-auto" multiTemplateDataRows [dataSource]="groups">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Nom</th>
    <td mat-cell *matCellDef="let group">{{group.name}}</td>
  </ng-container>
  <ng-container matColumnDef="permissionCount">
    <th mat-header-cell *matHeaderCellDef>Nombre de permissions</th>
    <td mat-cell *matCellDef="let group">{{group.permissions.length}}</td>
  </ng-container>
  <ng-container matColumnDef="employeeCount">
    <th mat-header-cell *matHeaderCellDef>Nombre d'employés</th>
    <td mat-cell *matCellDef="let group">{{group.employeeCount}}</td>
  </ng-container>
  <ng-container matColumnDef="defaultGroup">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell [class.disabled]="!canSetBrowserDefaultGroup" *matCellDef="let group">
      <button
        mat-raised-button
        color="accent"
        [disabled]="isDefaultGroup(group) ? true : null"
        (click)="setDefaultGroup(group)">
        <ng-container *ngIf="!isDefaultGroup(group)">
          Définir par défaut
        </ng-container>
        <ng-container *ngIf="isDefaultGroup(group)">
          Par défaut
        </ng-container>
      </button>
    </td>
  </ng-container>
  <ng-container matColumnDef="editGroup">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell [class.disabled]="!canEditGroup" *matCellDef="let group">
      <button
        mat-raised-button
        color="accent"
        routerLink="/group/edit/{{group.id}}">
        Modifier
      </button>
    </td>
  </ng-container>

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

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