<div class="action-bar">
  <button mat-raised-button color="accent" [routerLink]="addLink">Ajouter</button>
</div>

<table class="mx-auto" *ngIf="entities$ | async as entities" mat-table [dataSource]="entities">
  <!--  Columns  -->
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.def">
    <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
    <td mat-cell *matCellDef="let entity">{{column.valueFn(entity)}}</td>
  </ng-container>

  <!--   Icons -->
  <ng-container *ngFor="let icon of icons; let iconIndex = index" matColumnDef="icon{{iconIndex}}">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let entity" [class.disabled]="icon.disabledFn && icon.disabledFn(entity)">
      <mat-icon [svgIcon]="icon.icon" [color]="icon.color" [title]="icon.title"></mat-icon>
    </td>
  </ng-container>

  <!--  Buttons  -->
  <ng-container *ngFor="let button of buttons; let buttonIndex = index" matColumnDef="button{{buttonIndex}}">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell [class.disabled]="!hasPermissionToUseButton(button)" *matCellDef="let entity">
      <button
        mat-raised-button
        color="accent"
        [routerLink]="button.link ? button.link.externalLink ? undefined : button.link : button.linkFn(entity).externalLink ? undefined : button.linkFn(entity)"
        [disabled]="button.disabledFn && button.disabledFn(entity)"
        (click)="openExternalLink(button, entity)">
        {{button.text}}
      </button>
    </td>
  </ng-container>

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