<app-form-page
        *ngIf="node"
        [formGroup]="form"
        [isUpdate]="isUpdate"
        (onSave)="save()"
        (onClose)="close()">
    <ng-template formPageHeader let-isUpdate>
        <h2>
            {{ 'common.user_space' | 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>
        <ng-container *ngIf="nodeId">
            <div class="divider"></div>
            <div class="flex flex-col gap-2">
                <p class="font-bold label">{{ 'user_space.assign_users' | translate }}</p>
                <div *ngIf="node.users && node.users.length > 0" class="flex flex-wrap gap-1">
                    <div *ngFor="let user of node.users">
                        <p-chip [label]="user.username" [removable]="true"
                                (onRemove)="node.users.splice(node.users.indexOf(user), 1)"></p-chip>
                    </div>
                </div>
                <div *ngIf="node.users?.length === 0">
                    <span>{{ 'table.no_entries_found' | translate }}</span>
                </div>
            </div>
            <div class="flex flex-col gap-2">
                <p class="font-bold label">{{ 'user_space.invite_users' | translate }}</p>
                <div>
                    <app-chip-input formControlName="emailsToInvite" type="email"
                                    placeholder="{{'common.enter_emails' | translate}}"/>
                </div>
            </div>
        </ng-container>
    </ng-template>
</app-form-page>
