<app-form-page
        *ngIf="node"
        [formGroup]="form"
        [isUpdate]="isUpdate"
        (onSave)="save()"
        (onClose)="close()">
    <ng-template formPageHeader let-isUpdate>
        <h2>
            {{ 'common.short_url' | 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">{{ 'short_url.short_url' | translate }}</p>
            <input
                    pInputText
                    class="value"
                    type="text"
                    formControlName="shortUrl"/>
        </div>
        <div class="form-page-input">
            <p class="label">{{ 'short_url.target_url' | translate }}</p>
            <input
                    pInputText
                    class="value"
                    type="text"
                    formControlName="targetUrl"/>
        </div>
        <div class="form-page-input">
            <p class="label">{{ 'common.description' | translate }}</p>
            <input
                    pInputText
                    class="value"
                    type="text"
                    formControlName="description"/>
        </div>
        <div class="form-page-input">
            <p class="label">{{ 'short_url.loading_screen' | translate }}</p>
            <p-checkbox
                    class="value"
                    [binary]="true"
                    formControlName="loadingScreen"/>
        </div>
        <div class="form-page-input">
            <p class="label">{{ 'common.group' | translate }}</p>
            <div
                    class="value">
                <p-dropdown
                        [options]="groups"
                        formControlName="groupId"
                        [showClear]="true"
                        [filter]="true"
                        filterBy="name"
                        optionLabel="name"
                        optionValue="id"
                ></p-dropdown>
            </div>
        </div>
        <div class="form-page-input">
            <p class="label">{{ 'common.domain' | translate }}</p>
            <div
                    class="value">
                <p-dropdown
                        [options]="domains"
                        formControlName="domainId"
                        [showClear]="true"
                        [filter]="true"
                        filterBy="name"
                        optionLabel="name"
                        optionValue="id"
                ></p-dropdown>
            </div>
        </div>
    </ng-template>
</app-form-page>
