<app-form-page
  *ngIf="node"
  [formGroup]="form"
  [isUpdate]="isUpdate"
  (onSave)="save()"
  (onClose)="close()">
  <ng-template formPageHeader let-isUpdate>
    <h2>
      {{ 'user.user' | translate }}
      {{
        (isUpdate ? 'sidebar.header.update' : 'sidebar.header.create')
          | translate
      }}
    </h2>
  </ng-template>

  <ng-template formPageContent>
    <ng-container *ngIf="!this.nodeId; else showId">
      <div class="form-page-input">
        <p class="label">{{ 'common.id' | translate }}</p>
        <p-dropdown
          [options]="notExistingUsers"
          optionLabel="username"
          optionValue="keycloakId"
          formControlName="keycloakId"></p-dropdown>
      </div>
    </ng-container>
    <ng-template #showId>
      <div class="form-page-input">
        <p class="label">{{ 'common.id' | translate }}</p>
        <input pInputText class="value" type="number" formControlName="id" />
      </div>
    </ng-template>

    <div class="form-page-input">
      <p class="label">{{ 'user.username' | translate }}</p>
      <input pInputText class="value" type="text" formControlName="username" />
    </div>
    <div class="form-page-input">
      <p class="label">{{ 'user.email' | translate }}</p>
      <input pInputText class="value" type="text" formControlName="email" />
    </div>
    <div class="divider"></div>
    <p-multiSelect
      [options]="roles"
      formControlName="roles"
      optionLabel="name"
      placeholder="{{ 'user.assign_roles' | translate }}"
      display="chip"
      [showClear]="true" />
  </ng-template>
</app-form-page>
