<div #permissions class="permissions-field">
  <p>{{title}}</p>
  <div class="d-flex flex-row justify-content-between permissions-list">
    <ng-container *ngTemplateOutlet="permissionTemplate;context:{type: 'view'}"></ng-container>
    <ng-container *ngTemplateOutlet="permissionTemplate;context:{type: 'edit'}"></ng-container>
    <ng-container *ngTemplateOutlet="permissionTemplate;context:{type: 'remove'}"></ng-container>
    <ng-container *ngTemplateOutlet="permissionTemplate;context:{type: 'other'}"></ng-container>
  </div>
  <mat-error *ngIf="!permissionsValid">Un group doit avoir au moins une permission</mat-error>
</div>

<ng-template
  #permissionTemplate
  let-type="type">
  <div class="d-flex flex-column">
    <mat-checkbox
      *ngFor="let permission of permissionControls[type]"
      [formControl]="permission.control"
      (click)="togglePermission(permission)">
      {{permission.description}}
    </mat-checkbox>
  </div>
</ng-template>
