<div [formGroup]="formGroup" class="flex flex-column gap-1">
    <div class="flex gap-2" [class.flex-column]="!topLevel" [class.align-items-center]="topLevel">
        <div class="form-w-full" *ngIf="topLevel; else showSuboptionInput">
            <p-dropdown
                inputId="{{ codeInputId }}"
                [editable]="true"
                [filter]="true"
                filterBy="label"
                placeholder="Select or Type Option Code"
                [showClear]="true"
                styleClass="w-full"
                [options]="v6 ? optionsService.getStandardDhcpv6Options() : optionsService.getStandardDhcpv4Options()"
                formControlName="optionCode"
                pTooltip="Use the dropdown to select an option from the list of standard options. If the option is not in the list, simply type its code (a number) in the box. When using the dropdown, it is possible to filter by option name or code."
                (onChange)="onOptionCodeChange($event)"
            >
            </p-dropdown>
        </div>
        <ng-template #showSuboptionInput>
            <!-- For smaller viewports, option nesting level can't be visualized with left padding (not enough horizontal space), so display light divider and text information about nest level. -->
            <p-divider class="sm:hidden" type="dashed" />
            <div class="sm:hidden mb-4 font-semibold">Suboption level {{ nestLevel }}</div>
            <span class="p-float-label">
                <p-inputNumber
                    ngDefaultControl
                    inputId="{{ codeInputId }}"
                    min="1"
                    max="{{ v6 ? 65535 : 255 }}"
                    formControlName="optionCode"
                    pTooltip="Enter a suboption code (a number)."
                    (onInput)="onOptionCodeChange($event)"
                    [useGrouping]="false"
                >
                </p-inputNumber>
                <label for="{{ codeInputId }}">Type Suboption Code</label></span
            >
        </ng-template>
        <app-help-tip *ngIf="optionDef" [subject]="optionDef.name">
            <ng-container *ngIf="optionDef.array">
                <div *ngIf="optionDef.optionType === 'record'">
                    This option carries the records of the following fields:
                    <ul>
                        <li *ngFor="let record of optionDef.recordTypes">{{ record }}</li>
                    </ul>
                    These records can be repeated, forming an array of records. By default, the option has only one
                    record, but additional records can be defined as necessary by adding suitable option fields.
                </div>
                <div *ngIf="optionDef.optionType !== 'record'">
                    This option can comprise an array of the
                    <span class="font-semibold">{{ optionDef.optionType }}</span>
                    option fields. By default, it has only one option field, but more fields of the same type can be
                    added as necessary.
                </div>
            </ng-container>
            <ng-container *ngIf="!optionDef.array">
                <div *ngIf="optionDef.optionType === 'empty'">This option carries no option fields (is empty).</div>
                <div *ngIf="optionDef.optionType === 'record'">
                    This option carries a single record of the following fields:
                    <ul>
                        <li *ngFor="let record of optionDef.recordTypes">{{ record }}</li>
                    </ul>
                </div>
                <div *ngIf="optionDef.optionType !== 'record' && optionDef.optionType !== 'empty'">
                    This option comprises a single <span class="font-semibold">{{ optionDef.optionType }}</span>
                    option field.
                </div>
            </ng-container>
            <div *ngIf="optionDef.encapsulate.length > 0" class="mt-3">
                It encapsulates the suboptions with the following codes:
                {{ getStandardDhcpOptionDefCodes().join(', ') || '(none)' }}.
            </div>
            <div *ngIf="!optionDef.encapsulate" class="mt-3">It carries no suboptions.</div>
        </app-help-tip>
    </div>
    <div class="flex align-items-center flex-wrap gap-2 ml-1">
        <div *ngIf="topLevel" class="field-checkbox mb-0">
            <p-checkbox
                ngDefaultControl
                formControlName="alwaysSend"
                [binary]="true"
                inputId="{{ alwaysSendCheckboxId }}"
                pTooltip="When checked, the option will always be returned to a DHCP client, regardless whether it is requested or not."
            ></p-checkbox>
            <label for="{{ alwaysSendCheckboxId }}">Always Send</label>
        </div>
        <p-splitButton
            label="{{ 'Add ' + lastFieldType }}"
            [model]="fieldTypes"
            pTooltip="Adds a new option field - a binary field or last added field type by default. Use the dropdown to select other type, if desired."
            styleClass="p-button-secondary p-button-sm p-button-text"
            (onClick)="lastFieldCommand()"
        >
        </p-splitButton>
        <button
            pButton
            type="button"
            icon="pi pi-times"
            [label]="topLevel ? 'Delete Option' : 'Delete Suboption'"
            class="p-button-sm p-button-danger p-button-text"
            (click)="deleteOption()"
        ></button>
    </div>
    <div
        *ngIf="optionFields.length !== 0; else emptyOption"
        formArrayName="optionFields"
        class="flex flex-column gap-5 mt-4"
    >
        <ng-container
            *ngFor="
                let fieldControl of optionFields.controls as DhcpOptionFieldFormGroup;
                let i = index;
                let first = first
            "
        >
            <div [ngSwitch]="fieldControl.data.fieldType" class="flex gap-2 sm:pl-3" [formGroupName]="i">
                <ng-container *ngSwitchCase="FieldType.Binary">
                    <span class="p-float-label">
                        <textarea
                            id="{{ fieldControl.data.getInputId(0) }}"
                            pInputTextarea
                            class="option-field h-full"
                            formControlName="control"
                        ></textarea>
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.String">
                    <span class="p-float-label">
                        <input
                            id="{{ fieldControl.data.getInputId(0) }}"
                            pInputText
                            class="option-field"
                            formControlName="control"
                        />
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Bool">
                    <div id="{{ fieldControl.data.getInputId(0) }}" class="p-inputtext option-field p-0">
                        <p-toggleButton onLabel="True" offLabel="False" formControlName="control"> </p-toggleButton>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Uint8">
                    <span class="p-float-label">
                        <p-inputNumber
                            ngDefaultControl
                            inputId="{{ fieldControl.data.getInputId(0) }}"
                            min="0"
                            max="255"
                            inputStyleClass="option-field"
                            formControlName="control"
                            [useGrouping]="false"
                        >
                        </p-inputNumber>
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Uint16">
                    <span class="p-float-label">
                        <p-inputNumber
                            ngDefaultControl
                            inputId="{{ fieldControl.data.getInputId(0) }}"
                            min="0"
                            max="65535"
                            inputStyleClass="option-field"
                            formControlName="control"
                            [useGrouping]="false"
                        >
                        </p-inputNumber>
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Uint32">
                    <span class="p-float-label">
                        <p-inputNumber
                            ngDefaultControl
                            inputId="{{ fieldControl.data.getInputId(0) }}"
                            min="0"
                            max="4294967295"
                            inputStyleClass="option-field"
                            formControlName="control"
                            [useGrouping]="false"
                        >
                        </p-inputNumber>
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Int8">
                    <span class="p-float-label">
                        <p-inputNumber
                            ngDefaultControl
                            inputId="{{ fieldControl.data.getInputId(0) }}"
                            min="-128"
                            max="127"
                            inputStyleClass="option-field"
                            formControlName="control"
                            [useGrouping]="false"
                        >
                        </p-inputNumber>
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Int16">
                    <span class="p-float-label">
                        <p-inputNumber
                            ngDefaultControl
                            inputId="{{ fieldControl.data.getInputId(0) }}"
                            min="-32768"
                            max="32767"
                            inputStyleClass="option-field"
                            formControlName="control"
                            [useGrouping]="false"
                        >
                        </p-inputNumber>
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Int32">
                    <span class="p-float-label">
                        <p-inputNumber
                            ngDefaultControl
                            inputId="{{ fieldControl.data.getInputId(0) }}"
                            min="-2147483648"
                            max="2147483647"
                            inputStyleClass="option-field"
                            formControlName="control"
                            [useGrouping]="false"
                        >
                        </p-inputNumber>
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.IPv4Address">
                    <span class="p-float-label">
                        <input
                            id="{{ fieldControl.data.getInputId(0) }}"
                            pInputText
                            class="option-field"
                            formControlName="control"
                        />
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.IPv6Address">
                    <span class="p-float-label">
                        <input
                            id="{{ fieldControl.data.getInputId(0) }}"
                            pInputText
                            class="option-field"
                            formControlName="control"
                        />
                        <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                    </span>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.IPv6Prefix">
                    <div class="mixed-content gap-1">
                        <span class="p-float-label prefix">
                            <input
                                id="{{ fieldControl.data.getInputId(0) }}"
                                pInputText
                                class="option-field"
                                formControlName="prefix"
                            />
                            <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                        </span>
                        <span class="p-float-label prefix-len">
                            <p-inputNumber
                                inputId="{{ fieldControl.data.getInputId(1) }}"
                                ngDefaultControl
                                min="1"
                                max="128"
                                inputStyleClass="option-field"
                                formControlName="prefixLength"
                                [useGrouping]="false"
                            >
                            </p-inputNumber>
                            <label for="{{ fieldControl.data.getInputId(1) }}">len</label>
                        </span>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Psid">
                    <div class="mixed-content gap-1">
                        <span class="p-float-label prefix">
                            <p-inputNumber
                                inputId="{{ fieldControl.data.getInputId(0) }}"
                                ngDefaultControl
                                min="0"
                                max="65535"
                                inputStyleClass="option-field"
                                formControlName="psid"
                                [useGrouping]="false"
                            >
                            </p-inputNumber>
                            <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                        </span>
                        <span class="p-float-label prefix-len">
                            <p-inputNumber
                                inputId="{{ fieldControl.data.getInputId(1) }}"
                                ngDefaultControl
                                min="0"
                                max="16"
                                inputStyleClass="option-field"
                                formControlName="psidLength"
                                [useGrouping]="false"
                            >
                            </p-inputNumber>
                            <label for="{{ fieldControl.data.getInputId(1) }}">len</label>
                        </span>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="FieldType.Fqdn">
                    <div class="mixed-content flex-column sm:flex-row gap-2">
                        <span class="p-float-label">
                            <input
                                id="{{ fieldControl.data.getInputId(0) }}"
                                pInputText
                                class="option-field"
                                formControlName="control"
                            />
                            <label for="{{ fieldControl.data.getInputId(0) }}">{{ fieldControl.data.fieldType }}</label>
                        </span>
                        <p-toggleButton
                            onLabel="Use Full FQDN"
                            offLabel="Use Partial FQDN"
                            styleClass="option-field"
                            formControlName="isPartialFqdn"
                            (onChange)="togglePartialFqdn($event, i)"
                        >
                        </p-toggleButton>
                    </div>
                </ng-container>
                <div class="flex flex-column align-items-start">
                    <button
                        pButton
                        type="button"
                        icon="pi pi-times"
                        class="p-button-text p-button p-button-danger"
                        (click)="deleteField(i)"
                    ></button>
                    <app-help-tip
                        *ngIf="fieldControl.data.fieldType === FieldType.Binary"
                        subject="binary Option Field"
                    >
                        <p>
                            Option value can be specified as a string of the hexadecimal digits. The following formats
                            are accepted:
                        </p>
                        <ul>
                            <li>Capital letters, e.g., 1F:1E:AB:CE</li>
                            <li>Non-capital letters, e.g., 8f:6a:bc:78</li>
                            <li>Space as a separator, e.g., 87 68 af b8</li>
                            <li>Colon as a separator (see above)</li>
                            <li>No separator, e.g., 05F74FA6</li>
                        </ul>
                        <p>
                            The specified value must have even number of hexadecimal digits. Please prepend a leading
                            zero when necessary.
                        </p>
                    </app-help-tip>
                </div>
            </div>
        </ng-container>
    </div>
    <ng-template #emptyOption>
        <div class="ml-3 mt-3">
            <p-tag
                icon="pi pi-info-circle"
                value="Empty Option"
                pTooltip="This option carries no data in its payload. It is fine for some options but most of them require some payload. You can use Add Payload button to add option fields."
                styleClass="empty-option-tag"
            ></p-tag>
        </div>
    </ng-template>
    <div class="sm:pl-3 mt-6">
        <ng-container *ngIf="suboptions.length > 0">
            <app-dhcp-option-set-form
                v6="false"
                [formArray]="suboptions"
                [nestLevel]="nestLevel + 1"
                [optionSpace]="optionDef?.encapsulate"
            ></app-dhcp-option-set-form>
        </ng-container>
    </div>
</div>
