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

    <ng-template formPageContent>
        <div class="form-page-input">
            <p class="label">{{ 'common.id' | translate }}</p>
            <input pInputText class="value" type="number" formControlName="id"/>
        </div>
        <div class="form-page-input">
            <p class="label">{{ 'common.name' | translate }}</p>
            <input
                    pInputText
                    class="value"
                    type="text"
                    formControlName="name"/>
        </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>
