<div class="modal-header">
    <h2 class="modal-title mat-dialog-title" mat-dialog-title *ngIf="data.role" trans>Update Role</h2>
    <h2 class="modal-title mat-dialog-title" mat-dialog-title *ngIf="!data.role" trans>Create a New Role</h2>
    <button type="button" (click)="close()" class="close-button no-style" tabindex="-1"><mat-icon svgIcon="close"></mat-icon></button>
</div>

<form autocomplete="off" (submit)="confirm()" *ngIf="errors$ | async as errors" [formGroup]="form" ngNativeValidate>
   <div class="many-inputs mat-dialog-content" mat-dialog-content>
       <div class="input-container">
           <label for="name" trans>Name</label>
           <input type="text" formControlName="name" id="name" required>
           <div class="error" *ngIf="errors.name">{{errors.name}}</div>
       </div>

       <permission-manager formControlName="permissions"></permission-manager>
       <div class="error" *ngIf="errors?.permissions">{{errors?.permissions}}</div>

       <div class="setting-container">
           <mat-slide-toggle formControlName="default" id="default" trans>Default</mat-slide-toggle>
           <p trans>Assign this role to new users automatically.</p>
           <div class="error" *ngIf="errors.default">{{errors.default}}</div>
       </div>

       <div class="setting-container">
           <mat-slide-toggle id="guest" formControlName="guests" trans>Guests</mat-slide-toggle>
           <p trans>Assign this role to guests (not logged in users).</p>
           <div class="error" *ngIf="errors.guests">{{errors.guests}}</div>
       </div>
   </div>

    <div class="buttons right mat-dialog-actions" mat-dialog-actions>
        <button (click)="close()" type="button" class="button cancel" mat-button trans>Cancel</button>
        <button type="submit" mat-raised-button color="accent" [disabled]="loading$ | async">
            <span *ngIf="data.role" trans>Update</span>
            <span *ngIf="!data.role" trans>Create</span>
        </button>
    </div>
</form>