<form [formGroup]="form" [class.opacity-50]="disabled">
  <label class="form-label">{{title}}</label>
  <ul class="list-group">
    <li class="list-group-item d-flex">
      <div class="col-3" i18n>Type</div>
      <div class="col" i18n>All</div>
      <div class="col" i18n>Add</div>
      <div class="col" i18n>Change</div>
      <div class="col" i18n>Delete</div>
      <div class="col" i18n>View</div>
    </li>
    <li class="list-group-item d-flex" *ngFor="let type of PermissionType | keyvalue" [formGroupName]="type.key">
      <div class="col-3">{{type.key}}:</div>

      <div class="col form-check form-check-inline form-switch" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key)" placement="left" triggers="mouseenter:mouseleave">
        <input type="checkbox" class="form-check-input" id="{{type.key}}_all" (change)="toggleAll($event, type.key)" [checked]="typesWithAllActions.has(type.key) || isInherited(type.key)" [attr.disabled]="disabled || isInherited(type.key) ? true : null">
        <label class="form-check-label visually-hidden" for="{{type.key}}_all" i18n>All</label>
      </div>

      <div *ngFor="let action of PermissionAction | keyvalue" class="col form-check form-check-inline" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key, action.key)" placement="left" triggers="mouseenter:mouseleave">
        <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}">
        <label class="form-check-label visually-hidden" for="{{type.key}}_{{action.key}}" i18n>{{action.key}}</label>
      </div>
    </li>
    <div *ngIf="error" class="invalid-feedback d-block">{{error}}</div>
  </ul>
</form>
