<div [formGroup]="formGroup">
    <p-fieldset legend="Prefix" styleClass="mt-4">
        <div class="flex mt-4 mb-2 align-items-center flex-wrap gap-2 row-gap-5" formGroupName="prefixes">
            <span class="flex-auto p-float-label min-w-0">
                <input [id]="uuids.prefix" pInputText formControlName="prefix" class="w-full" />
                <label [for]="uuids.prefix">Pool Prefix</label>
            </span>
            <span class="p-float-label min-w-0">
                <p-inputNumber
                    ngDefaultControl
                    [inputId]="uuids.delegatedLength"
                    inputStyleClass="delegated-length-input w-full"
                    formControlName="delegatedLength"
                    min="1"
                    max="128"
                >
                </p-inputNumber>
                <label [for]="uuids.delegatedLength">Delegated Length</label>
            </span>
            <span class="flex-auto p-float-label min-w-0">
                <input [id]="uuids.excludedPrefix" pInputText formControlName="excludedPrefix" class="w-full" />
                <label [for]="uuids.excludedPrefix">Excluded Prefix</label>
            </span>
        </div>
        <ng-container *ngFor="let control of ['prefix', 'excludedPrefix']">
            <small
                *ngIf="
                    formGroup.get('prefixes')?.get(control)?.invalid &&
                    (formGroup.get('prefixes').get(control).dirty || formGroup.get('prefixes').get(control).touched) &&
                    formGroup.get('prefixes').get(control).hasError('ipv6Prefix')
                "
                class="p-error block"
                >{{ formGroup.get('prefixes').get(control).errors.ipv6Prefix }}
            </small>
        </ng-container>
        <ng-container
            *ngFor="
                let err of [
                    'ipv6PrefixDelegatedLength',
                    'ipv6ExcludedPrefix',
                    'ipv6ExcludedPrefixDelegatedLength',
                    'ipv6PrefixOverlaps',
                ]
            "
        >
            <small
                *ngIf="formGroup.get('prefixes').invalid && formGroup.get('prefixes').hasError(err)"
                class="p-error block"
                >{{ formGroup.get('prefixes').errors[err] }}
            </small>
        </ng-container>
    </p-fieldset>
    <p-fieldset legend="Assignments" styleClass="mt-4">
        <div class="mt-4">
            <span class="p-float-label mt-4 mb-2">
                <p-multiSelect
                    [inputId]="uuids.selectedDaemons"
                    optionLabel="label"
                    optionValue="id"
                    [options]="selectableDaemons"
                    formControlName="selectedDaemons"
                    display="chip"
                    [showToggleAll]="false"
                    styleClass="w-full adaptive-chips-background"
                    (onChange)="onDaemonsChange($event)"
                >
                </p-multiSelect>
                <label [for]="uuids.selectedDaemons">DHCP Servers</label>
            </span>
            <small
                *ngIf="
                    formGroup.get('selectedDaemons').invalid &&
                    (formGroup.get('selectedDaemons').dirty || formGroup.get('selectedDaemons').touched)
                "
                class="p-error block"
                >At least one server must be selected.
            </small>
        </div>
    </p-fieldset>
    <p-fieldset legend="Pool DHCP Parameters" styleClass="mt-4">
        <app-shared-parameters-form [servers]="servers" [formGroup]="formGroup.get('parameters')">
        </app-shared-parameters-form>
    </p-fieldset>
    <p-fieldset [formGroup]="formGroup.get('options')" legend="Pool DHCP Options" styleClass="mt-4">
        <div class="flex mt-2 pb-4">
            <p-checkbox formControlName="unlocked" [binary]="true"> </p-checkbox>
            <div class="flex ml-2 font-semibold">Unlock setting DHCP options for individual servers.</div>
        </div>
        <ng-container *ngFor="let optionSet of formGroup.get('options.data')?.controls; let i = index">
            <div *ngIf="i === 0 || formGroup.get('options.unlocked')?.value" class="mb-3 mt-3">
                <div *ngIf="formGroup.get('options.unlocked')?.value" class="pb-5">
                    <p-divider *ngIf="formGroup.get('options.data')?.length > 1" align="center">
                        <p-tag [severity]="getServerTagSeverity(i)">
                            {{ servers[i] }}
                        </p-tag>
                    </p-divider>
                </div>
                <app-dhcp-option-set-form
                    [v6]="true"
                    [formArray]="optionSet"
                    (optionAdd)="onOptionAdd(i)"
                ></app-dhcp-option-set-form>
            </div>
        </ng-container>
    </p-fieldset>
</div>
