<ng-container *ngIf="editing">
  <h1>Editing {{ model.rolenameValue }}</h1>
</ng-container>
<ng-container *ngIf="adding">
  <h1>Add new role</h1>
</ng-container>

<form (ngSubmit)="updateRole()">
  <div class="row" *ngIf="adding">
    <div class="col-lg-6 col-12">
      <mat-form-field appearance="outline" color="accent">
        <mat-label>Role name</mat-label>
        <input
          matInput
          type="text"
          [formControl]="model.rolename"
          name="rolename"
          autocorrect="off"
          autocapitalize="none"
          required
        />
        <mat-error *ngIf="model.rolename.errors">
          {{ model.rolenameError }}
        </mat-error>
      </mat-form-field>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6 col-12">
      <values-picker
        name="permission"
        [value-mapper]="UIFriendlyPermission"
        [control]="model.permissions"
        [selection-list]="allPermissions"
      ></values-picker>
    </div>
  </div>

  <div class="row">
    <div class="col-12 py-4">
      <button mat-raised-button color="accent" type="submit">
        {{ editing ? 'UPDATE' : 'ADD' }}
      </button>

      <button
        mat-raised-button
        class="ms-2"
        color="primary"
        type="button"
        (click)="cancel()"
      >
        CANCEL
      </button>
    </div>
  </div>
</form>
