<div *ngIf="parameterNames.length > 0; else noRowsBlock" class="flex flex-column gap-4">
    <div class="shared-parameter-wrapper font-semibold mt-3 flex gap-4 pb-4">
        <div class="md:hidden flex-auto">Parameter &amp; value</div>
        <div *ngIf="servers?.length > 1" class="md:hidden flex-none">Unlock</div>
        <div class="hidden md:block w-20-perc">Parameter</div>
        <div class="hidden md:block flex-auto">Value</div>
        <div *ngIf="servers?.length > 1" class="hidden md:block flex-none">Unlock</div>
    </div>
    <ng-container *ngFor="let parameterName of parameterNames">
        <ng-container
            [ngTemplateOutlet]="parameterRowFlex"
            [ngTemplateOutletContext]="{
                parameterName: parameterName,
                controls: getParameterFormControls(parameterName),
            }"
        ></ng-container>
    </ng-container>
    <ng-template [formGroup]="formGroup" #parameterRowFlex let-parameterName="parameterName" let-controls="controls">
        <div
            class="shared-parameter-wrapper flex flex-column column-gap-2 row-gap-4 pb-4 md:flex-row md:align-items-start"
            [formGroupName]="parameterName"
        >
            <div class="flex gap-2 md:block md:w-20-perc md:flex-none">
                <div class="font-semibold text-color-secondary flex-auto">
                    {{ uncamelCase(parameterName) }}
                    <small *ngIf="controls.data.versionLowerBound" class="p-error block mt-2 pr-4 md:pr-6 text-left"
                        >Kea {{ controls.data.versionLowerBound }} and later only
                    </small>
                    <small *ngIf="controls.data.versionUpperBound" class="p-error block mt-2 pr-4 md:pr-6 text-left"
                        >Kea earlier than {{ controls.data.versionUpperBound }} only
                    </small>
                </div>
                <div
                    *ngIf="servers?.length > 1"
                    class="flex-none md:hidden inline-flex gap-1 align-items-center text-color-secondary"
                >
                    <i
                        class="pi"
                        [class.pi-lock]="!controls.get('unlocked').value"
                        [class.pi-lock-open]="controls.get('unlocked').value"
                    ></i>
                    <p-checkbox formControlName="unlocked" [binary]="true"> </p-checkbox>
                </div>
            </div>
            <div class="md:flex-auto" formArrayName="values">
                <ng-container *ngFor="let control of controls.get('values').controls; let index = index">
                    <ng-container *ngIf="index === 0 || (controls.get('unlocked').value && index < servers.length)">
                        <div class="flex flex-column md:flex-row md:align-items-center gap-2" [class.mt-3]="index > 0">
                            <span
                                *ngIf="controls.get('unlocked').value && servers.length > index"
                                class="server-tag"
                                [class.boolean-form]="controls.data?.type === 'boolean'"
                            >
                                <p-tag [severity]="getServerTagSeverity(index)">
                                    {{ servers[index] }}
                                </p-tag>
                            </span>
                            <div class="flex flex-auto align-items-end">
                                <div [ngSwitch]="controls.data?.type" class="shared-parameter-form flex-auto">
                                    <ng-container *ngSwitchCase="'string'">
                                        <ng-container *ngIf="controls.data.values?.length > 0; else noValuesCase">
                                            <p-multiSelect
                                                *ngIf="controls.data.isArray; else noArrayCase"
                                                [options]="controls.data.values"
                                                [showClear]="true"
                                                [formControlName]="index"
                                                styleClass="w-full"
                                                placeholder="(not specified)"
                                            >
                                            </p-multiSelect>
                                            <ng-template #noArrayCase>
                                                <p-dropdown
                                                    [autoDisplayFirst]="false"
                                                    [options]="controls.data.values"
                                                    [showClear]="true"
                                                    [formControlName]="index"
                                                    styleClass="w-full"
                                                    placeholder="(not specified)"
                                                >
                                                </p-dropdown>
                                            </ng-template>
                                        </ng-container>
                                        <ng-template #noValuesCase>
                                            <app-array-value-set-form
                                                *ngIf="controls.data.isArray; else noValuesNoArrayCase"
                                                [classFormControl]="control"
                                            >
                                            </app-array-value-set-form>
                                            <ng-template #noValuesNoArrayCase>
                                                <input pInputText [formControlName]="index" class="w-full" />
                                            </ng-template>
                                        </ng-template>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'boolean'">
                                        <ng-container *ngIf="controls.data.required">
                                            <p-checkbox ngDefaultControl [formControlName]="index" [binary]="true">
                                            </p-checkbox>
                                            {{ control.value || false }}
                                        </ng-container>
                                        <ng-container *ngIf="!controls.data.required">
                                            <p-triStateCheckbox ngDefaultControl [formControlName]="index">
                                            </p-triStateCheckbox>
                                            {{ control.value === null ? 'unset' : control.value }}
                                        </ng-container>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'number'">
                                        <p-inputNumber
                                            ngDefaultControl
                                            [min]="controls.data.min"
                                            [max]="controls.data.max"
                                            [minFractionDigits]="0"
                                            [maxFractionDigits]="controls.data.fractionDigits"
                                            styleClass="w-full"
                                            locale="en-US"
                                            [formControlName]="index"
                                            [useGrouping]="false"
                                        >
                                        </p-inputNumber>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'client-classes'">
                                        <app-dhcp-client-class-set-form
                                            [classFormControl]="control"
                                            [clientClasses]="clientClasses"
                                            [floatingPlaceholder]="false"
                                        >
                                        </app-dhcp-client-class-set-form>
                                    </ng-container>
                                    <ng-container *ngSwitchDefault> Something else </ng-container>
                                </div>
                                <button
                                    pRipple
                                    pButton
                                    [disabled]="control.value === (controls.data?.clearValue ?? null)"
                                    label="Clear"
                                    class="p-button-text p-button-sm hidden md:inline-flex flex-none ml-2"
                                    type="button"
                                    (click)="control.setValue(controls.data?.clearValue ?? null)"
                                ></button>
                                <p-button
                                    class="flex-none"
                                    [text]="true"
                                    icon="pi pi-times"
                                    [disabled]="control.value === (controls.data?.clearValue ?? null)"
                                    title="Clear"
                                    (click)="control.setValue(controls.data?.clearValue ?? null)"
                                    styleClass="md:hidden ml-2"
                                    size="small"
                                />
                            </div>
                        </div>
                        <small
                            *ngIf="control.invalid && (control.dirty || control.touched)"
                            class="p-error block mt-2 pr-4 md:pr-6 text-right"
                            >{{ controls.data.invalidText }}
                        </small>
                    </ng-container>
                </ng-container>
            </div>
            <div
                *ngIf="servers?.length > 1"
                class="hidden md:flex-none md:inline-flex gap-1 align-items-center text-color-secondary pt-2"
            >
                <i
                    class="pi"
                    [class.pi-lock]="!controls.get('unlocked').value"
                    [class.pi-lock-open]="controls.get('unlocked').value"
                ></i>
                <p-checkbox formControlName="unlocked" [binary]="true"> </p-checkbox>
            </div>
        </div>
    </ng-template>
</div>
<ng-template #noRowsBlock>
    <span>No parameters configured.</span>
</ng-template>
