<div class="header">
    <span class="title" trans>Permissions</span>
    <button mat-flat-button color="accent" (click)="showAddPermissionsModal()" type="button" trans>Add</button>
</div>
<div class="manage-permissions" *ngIf="!addNewPermissionsActive">
    <div class="no-permissions" *ngIf="!_permissions.length" trans>No permissions yet.</div>

    <mat-chip-list [selectable]="false">
        <mat-chip (removed)="removePermission(permission.name)" [removable]="true" *ngFor="let permission of _permissions">
            <span>{{permission.name}}</span>
            <mat-icon svgIcon="cancel" matChipRemove></mat-icon>
        </mat-chip>
    </mat-chip-list>
</div>

<div class="error" *ngIf="errors && errors.permissions">{{errors.permissions}}</div>