@if (!state.initError) {
    @if (state.loaded) {
        <ng-container [formGroup]="state.group">
            @if (!state.wizard) {
                <p-fieldset legend="Assignments" styleClass="mt-4">
                    <div class="mt-4" [formGroup]="state.group">
                        <p-floatlabel class="block mb-2">
                            <p-multiSelect
                                inputId="servers-select"
                                optionLabel="label"
                                optionValue="index"
                                [options]="state.filteredDaemonGroups"
                                formControlName="selectedDaemonGroups"
                                display="chip"
                                [showToggleAll]="false"
                                styleClass="adaptive-chips-background"
                                class="max-w-form"
                                autofocus="true"
                                (onChange)="onDaemonGroupsChange($event)"
                            >
                            </p-multiSelect>
                            <label for="servers-select">DHCP Servers and/or Server Tags</label>
                            <span class="ml-2">
                                <app-help-tip subject="DHCP servers selection">
                                    <p>
                                        The location where the edited subnet information is saved depends on the loaded
                                        Kea hooks. If <span class="monospace">libdhcp_cb_cmds</span> is loaded, Stork
                                        updates the Config Backend database. If
                                        <span class="monospace">libdhcp_subnet_cmds</span> is loaded, Stork updates
                                        subnet data in the Kea JSON configuration file.
                                    </p>
                                    <p>
                                        If both <span class="monospace">libdhcp_subnet_cmds</span> and
                                        <span class="monospace">libdhcp_cb_cmds</span> hooks are loaded, Stork updates
                                        the subnet configuration in the Config Backend database, and leaves the JSON
                                        configuration unchanged. It conforms to the Kea behavior that prioritizes
                                        configuration specified in the Config Backend over the configuration sourced
                                        from the JSON file.
                                    </p>
                                    <p>
                                        If some daemons have the <span class="monospace">libdhcp_cb_cmds</span> hook
                                        loaded, they are connected to the same Config Backend database, and share the
                                        same server tag, then they cannot be configured individually. In this case, they
                                        are grouped into a single position in the server selection list. Such a group is
                                        labeled with the server tag and the number of daemons in the group. The
                                        configuration changes are applied to all daemons in the group.
                                    </p>
                                </app-help-tip>
                            </span>
                        </p-floatlabel>
                        @if (
                            state.group.get('selectedDaemonGroups').invalid &&
                            (state.group.get('selectedDaemonGroups').dirty ||
                                state.group.get('selectedDaemonGroups').touched)
                        ) {
                            <small class="app-error block">At least one server must be selected.</small>
                        }
                        @if (state.group.get('selectedDaemonGroups')?.disabled) {
                            <div class="flex align-items-center">
                                <div>Server selection is disabled</div>
                                <div class="ml-2">
                                    <app-help-tip subject="disabled servers selection">
                                        When a subnet belongs to a shared network, it is not allowed to change the
                                        assignments of the subnet to servers. These assignments can only be controlled
                                        in the shared network form, for the entire shared network. The subnet
                                        assignments can be directly controlled only when the subnet does not belong to a
                                        shared network.
                                    </app-help-tip>
                                </div>
                            </div>
                        }
                    </div>
                </p-fieldset>
            }
            <p-fieldset legend="Subnet" styleClass="mt-4">
                <p-floatlabel class="block mt-4 mb-2">
                    <input id="subnet" pInputText formControlName="subnet" class="max-w-form" />
                    <label for="subnet">Subnet</label>
                </p-floatlabel>
                @if (
                    state.group.get('subnet').invalid &&
                    (state.group.get('subnet').dirty || state.group.get('subnet').touched)
                ) {
                    @if (state.group.get('subnet').hasError('prefixInList')) {
                        <small class="app-error block">A subnet with this prefix already exists. </small>
                    }
                    @if (state.group.get('subnet').hasError('ipPrefix')) {
                        <small class="app-error block">{{ state.group.get('subnet').errors.ipPrefix }}</small>
                    }
                    @if (
                        !state.group.get('subnet').hasError('prefixInList') &&
                        !state.group.get('subnet').hasError('ipPrefix')
                    ) {
                        <small class="app-error block">A valid subnet prefix is required.</small>
                    }
                }
                @if (!state.wizard) {
                    <p-floatlabel class="block mt-5 mb-2">
                        <p-select
                            inputId="shared-networks-select"
                            emptyMessage="No shared networks found"
                            formControlName="sharedNetwork"
                            optionLabel="name"
                            optionValue="id"
                            [options]="state.selectableSharedNetworks"
                            [showClear]="true"
                            class="max-w-form"
                            (onChange)="onSharedNetworkChange($event)"
                        >
                        </p-select>
                        <label for="shared-network-select">Shared Network</label>
                    </p-floatlabel>
                }
            </p-fieldset>
            @if (!state.wizard) {
                <p-fieldset [formGroup]="state.group.get('userContexts')" legend="Subnet names" 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 subnet names for individual servers.</div>
                    </div>
                    @for (
                        userContext of state.group.get('userContexts.names')?.controls;
                        track userContext;
                        let i = $index
                    ) {
                        @if (i === 0 || state.group.get('userContexts.unlocked')?.value) {
                            <div class="mb-3 mt-3">
                                @if (state.group.get('userContexts.unlocked')?.value) {
                                    <div class="pb-2">
                                        @if (state.group.get('userContexts.names')?.length > 1) {
                                            <p-divider align="center">
                                                <p-tag [severity]="getServerTagSeverity(i)">
                                                    {{ state.servers[i] }}
                                                </p-tag>
                                            </p-divider>
                                        }
                                    </div>
                                }
                                <!-- Content -->
                                <p-floatlabel class="block mt-2 mb-4" formArrayName="names">
                                    <input
                                        id="subnet-name-{{ i }}"
                                        pInputText
                                        formControlName="{{ i }}"
                                        class="max-w-form"
                                    />
                                    <label for="subnet-name-{{ i }}">Subnet name</label>
                                </p-floatlabel>
                            </div>
                        }
                    }
                </p-fieldset>
                <p-fieldset legend="Pools" styleClass="mt-4">
                    <p-accordion [value]="0">
                        @for (pool of state.group.get('pools')?.controls; track pool; let i = $index) {
                            <p-accordion-panel [value]="i">
                                <p-accordion-header>
                                    <div class="flex align-items-center">
                                        <span class="word-break-all">{{ getPoolHeader(i)[0] }}</span>
                                        @if (
                                            pool.invalid &&
                                            (pool.dirty ||
                                                pool.touched ||
                                                pool.get('range')?.hasError('ipRangeOverlaps'))
                                        ) {
                                            <span
                                                class="ml-2 pi pi-exclamation-triangle text-red-500 text-decoration-none"
                                            ></span>
                                        }
                                    </div>
                                </p-accordion-header>
                                <p-accordion-content>
                                    <app-address-pool-form
                                        [subnet]="subnet"
                                        [formGroup]="pool"
                                        [selectableGroups]="getSelectedDaemonGroups()"
                                    >
                                    </app-address-pool-form>
                                    <div class="flex justify-content-start mt-4 mb-4">
                                        <div class="flex align-items-center">
                                            <p-button
                                                size="small"
                                                severity="danger"
                                                icon="pi pi-times"
                                                label="Delete Pool"
                                                (click)="onAddressPoolDelete(i)"
                                            ></p-button>
                                        </div>
                                    </div>
                                </p-accordion-content>
                            </p-accordion-panel>
                        }
                    </p-accordion>
                    <div class="flex justify-content-start">
                        <div class="flex align-items-center">
                            <p-button
                                styleClass="ml-0 mt-4"
                                size="small"
                                icon="fa-solid fa-plus"
                                label="Add Pool"
                                severity="info"
                                (click)="onAddressPoolAdd()"
                            ></p-button>
                        </div>
                    </div>
                </p-fieldset>
                @if (subnet.includes(':')) {
                    <p-fieldset legend="Prefix Delegation Pools" styleClass="mt-4">
                        <p-accordion [value]="0">
                            @for (pool of state.group.get('prefixPools')?.controls; track pool; let i = $index) {
                                <p-accordion-panel [value]="i">
                                    <p-accordion-header>
                                        <div class="flex align-items-center">
                                            <span class="word-break-all">{{ getPrefixPoolHeader(i)[0] }}</span>
                                            @if (
                                                pool.invalid &&
                                                (pool.dirty ||
                                                    pool.touched ||
                                                    pool.get('prefixes')?.hasError('ipv6PrefixOverlaps'))
                                            ) {
                                                <span
                                                    class="ml-2 pi pi-exclamation-triangle text-red-500 text-decoration-none"
                                                ></span>
                                            }
                                        </div>
                                    </p-accordion-header>
                                    <p-accordion-content>
                                        <app-prefix-pool-form
                                            [subnet]="subnet"
                                            [formGroup]="pool"
                                            [selectableGroups]="getSelectedDaemonGroups()"
                                        >
                                        </app-prefix-pool-form>
                                        <div class="flex justify-content-start mt-4 mb-4">
                                            <div class="flex align-items-center">
                                                <p-button
                                                    size="small"
                                                    severity="danger"
                                                    icon="pi pi-times"
                                                    label="Delete Pool"
                                                    (click)="onPrefixPoolDelete(i)"
                                                ></p-button>
                                            </div>
                                        </div>
                                    </p-accordion-content>
                                </p-accordion-panel>
                            }
                        </p-accordion>
                        <div class="flex justify-content-start">
                            <div class="flex align-items-center">
                                <p-button
                                    styleClass="ml-0 mt-4"
                                    size="small"
                                    icon="fa-solid fa-plus"
                                    label="Add Pool"
                                    severity="info"
                                    (click)="onPrefixPoolAdd()"
                                ></p-button>
                            </div>
                        </div>
                    </p-fieldset>
                }
                <p-fieldset legend="DHCP Parameters" styleClass="mt-4">
                    <app-shared-parameters-form
                        [clientClasses]="state.clientClasses"
                        [servers]="state.servers"
                        [formGroup]="state.group.get('parameters')"
                    >
                    </app-shared-parameters-form>
                </p-fieldset>
                <p-fieldset [formGroup]="state.group.get('options')" legend="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>
                    @for (optionSet of state.group.get('options.data')?.controls; track optionSet; let i = $index) {
                        @if (i === 0 || state.group.get('options.unlocked')?.value) {
                            <div class="mb-3 mt-3">
                                @if (state.group.get('options.unlocked')?.value) {
                                    <div class="pb-5">
                                        @if (state.group.get('options.data')?.length > 1) {
                                            <p-divider align="center">
                                                <p-tag [severity]="getServerTagSeverity(i)">
                                                    {{ state.servers[i] }}
                                                </p-tag>
                                            </p-divider>
                                        }
                                    </div>
                                }
                                <app-dhcp-option-set-form
                                    [v6]="state.dhcpv6"
                                    [formArray]="optionSet"
                                    (optionAdd)="onOptionAdd(i)"
                                ></app-dhcp-option-set-form>
                            </div>
                        }
                    }
                </p-fieldset>
            }
            <div class="flex align-items-center m-5 flex-wrap gap-2">
                @if (subnetId) {
                    <p-button
                        icon="pi pi-replay"
                        label="Revert Changes"
                        severity="secondary"
                        (onClick)="onRevert()"
                    ></p-button>
                }
                <p-button label="Cancel" severity="secondary" (onClick)="onCancel()"></p-button>
                @if (!state.wizard) {
                    <p-button label="Submit" [disabled]="state.group?.invalid" (onClick)="onSubmit()"></p-button>
                } @else {
                    <p-button
                        [disabled]="state.group?.get('subnet').invalid"
                        label="Proceed"
                        (onClick)="onSubnetProceed()"
                    ></p-button>
                }
            </div>
        </ng-container>
    } @else {
        <p-progressSpinner></p-progressSpinner>
    }
} @else {
    <p-fieldset legend="Errors" styleClass="mt-4">
        <p-message severity="error">
            <div class="flex flex-column">
                <div class="flex align-items-center m-4">
                    In order to apply configuration changes, the server should begin a transaction between the user and
                    the server. The server should also return the current data required, in the form where the subnet
                    information is specified. Unfortunately, starting the new transaction failed with the following
                    error:
                </div>
                <div class="flex align-items-center m-4 font-italic">
                    {{ state.initError }}
                </div>
                <div class="flex align-items-center m-4">Retrying can help in some cases.</div>
            </div>
        </p-message>
        <div class="mt-3">
            <p-button label="Retry" (onClick)="onRetry()" class="mr-2"></p-button>
            <p-button label="Back" (onClick)="onCancel()" />
        </div>
    </p-fieldset>
}