<div class="clr-row">
    <form class="clr-form clr-form-horizontal">
        <ng-container *ngFor="let item of selectedOptions; let i = index">
            <div class="clr-form-control">
                <label class="clr-control-label">
                    <ng-container *ngIf="i === 0"
                        >{{ 'SECURITY_HUB.FILTER_BY' | translate
                        }}<clr-tooltip>
                            <clr-icon
                                clrTooltipTrigger
                                shape="info-circle"
                                size="24"></clr-icon>
                            <clr-tooltip-content
                                clrPosition="top-right"
                                clrSize="lg"
                                *clrIfOpen>
                                <span>{{
                                    'SECURITY_HUB.TOOLTIP' | translate
                                }}</span>
                            </clr-tooltip-content>
                        </clr-tooltip></ng-container
                    >
                </label>
                <div class="clr-control-container flex">
                    <div class="clr-select-wrapper">
                        <select
                            class="clr-select"
                            (change)="select()"
                            [(ngModel)]="selectedOptions[i]"
                            [ngModelOptions]="{ standalone: true }">
                            <option
                                value="{{ OptionType.ALL }}"
                                *ngIf="i === 0">
                                {{
                                    OptionType_I18n_Map[OptionType.ALL]
                                        | translate
                                }}
                            </option>
                            <option
                                value="{{ item }}"
                                *ngFor="
                                    let item of getOption(selectedOptions[i])
                                ">
                                {{ OptionType_I18n_Map[item] | translate }}
                            </option>
                        </select>
                    </div>
                    <div
                        class="clr-input-wrapper ml-1"
                        *ngIf="
                            selectedOptions[i] !== OptionType.ALL &&
                            selectedOptions[i] !== OptionType.SEVERITY &&
                            selectedOptions[i] !== OptionType.CVSS3
                        ">
                        <input
                            [ngModelOptions]="{ standalone: true }"
                            [(ngModel)]="valueMap[selectedOptions[i]]"
                            class="clr-input"
                            type="text" />
                    </div>

                    <div
                        class="clr-select-wrapper ml-1"
                        *ngIf="selectedOptions[i] === OptionType.SEVERITY">
                        <select
                            class="clr-select"
                            [(ngModel)]="severity"
                            [ngModelOptions]="{ standalone: true }">
                            <option
                                value="{{ item.severity }}"
                                *ngFor="let item of SEVERITY_OPTIONS">
                                {{ item.severityLevel | translate }}
                            </option>
                        </select>
                    </div>

                    <div
                        class="clr-input-wrapper ml-1"
                        [class.clr-error]="isInvalid()"
                        *ngIf="selectedOptions[i] === OptionType.CVSS3">
                        <span>{{ 'BANNER_MESSAGE.FROM' | translate }}</span>
                        <input
                            [ngModelOptions]="{ standalone: true }"
                            [(ngModel)]="startScore"
                            class="clr-input"
                            type="text" />
                        <span>{{ 'BANNER_MESSAGE.TO' | translate }}</span>
                        <input
                            [ngModelOptions]="{ standalone: true }"
                            [(ngModel)]="endScore"
                            class="clr-input"
                            type="text" />
                        <clr-control-error *ngIf="isInvalid()">{{
                            'SECURITY_HUB.INVALID_VALUE' | translate
                        }}</clr-control-error>
                    </div>

                    <ng-container
                        *ngIf="
                            selectedOptions[i] !== OptionType.ALL && i === 0
                        ">
                        <clr-icon
                            shape="plus-circle"
                            class="plus"
                            [class.disabled]="!canAdd()"
                            (click)="add()"></clr-icon>
                        <clr-icon
                            [class.disabled]="!canReduce()"
                            (click)="reduce()"
                            shape="minus-circle"
                            class="minus"></clr-icon>
                    </ng-container>
                </div>
            </div>
        </ng-container>
    </form>
    <button
        (click)="fireSearchEvent()"
        id="search"
        type="button"
        class="btn btn-primary ml-1"
        [disabled]="loading || isInvalid()"
        [clrLoading]="loading">
        <clr-icon shape="search"></clr-icon
        >{{ 'SECURITY_HUB.SEARCH' | translate }}
    </button>
</div>
