
<form [formGroup]="roleForm">

  <ng-container *ngIf="data.action === 'edit';else newRole">
    <h3 mat-dialog-title>Edit role {{data.role.name}}</h3>
  </ng-container>

  <ng-template #newRole>
    <h3 mat-dialog-title>Create new role</h3>
  </ng-template>

  <div mat-dialog-content>

    <mat-form-field class="w-100">
      <span
        matPrefix
        matTooltip="Name of role"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>shield</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        type="text"
        name="-"
        autocomplete="off"
        placeholder="Name"
        formControlName="name"
        [readonly]="data.action === 'edit'" />
      <mat-error>{{CommonErrorMessages.appNameWithUppercaseHyphen}}</mat-error>
    </mat-form-field>

    <mat-form-field class="w-100 custom-alignment">
      <span
        matPrefix
        matTooltip="Role's description"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>featured_play_list</mat-icon>
        <span class="text-muted">|</span>
      </span>

      <textarea
        matInput
        type="text"
        name="-"
        autocomplete="off"
        placeholder="Description"
        formControlName="description"
        required
        rows="5">
      </textarea>
    </mat-form-field>

  </div>

  <div mat-dialog-actions [align]="'end'">

    <button
      mat-button
      mat-dialog-close>
      Cancel
    </button>

    <button
      mat-flat-button
      color="primary"
      (click)="save()"
      [disabled]="isLoading"
      type="submit">
      Save
    </button>

  </div>
</form>
