<div #filterArea id="filterArea" class="clr-row">
    <clr-icon
        id="{{ searchId }}"
        *ngIf="!opened"
        shape="search"
        size="20"
        class="search-btn"
        (click)="opened = true; dropdownOpened = true"></clr-icon>

    <ng-container *ngIf="opened">
        <div class="clr-control-container m-r-10px">
            <div class="clr-select-wrapper">
                <select
                    id="{{ typeSelectId }}"
                    class="clr-select"
                    [(ngModel)]="filterByType"
                    (change)="selectFilterType()">
                    <option
                        *ngFor="let filter of multipleFilter"
                        value="{{ filter.filterBy }}">
                        {{ filter.filterByShowText | translate }}
                    </option>
                </select>
            </div>
        </div>
        <div class="dropdown" [class.open]="dropdownOpened">
            <div
                class="dropdown-toggle border-bottom-color"
                (click)="dropdownOpened = !dropdownOpened">
                <clr-icon
                    class="search-dropdown-toggle"
                    shape="search"
                    size="20"
                    (click)="opened = false"></clr-icon>

                <div class="clr-control-container" *ngIf="!selectedValue">
                    <div class="clr-input-wrapper">
                        <input
                            [readonly]="filterByType !== 'tags'"
                            placeholder="{{
                                'ARTIFACT.FILTER_FOR_ARTIFACTS' | translate
                            }}"
                            [(ngModel)]="inputTag"
                            (keyup)="searchByInputTag()"
                            class="clr-input no-outline" />
                    </div>
                </div>
                <span *ngIf="selectedValue">
                    <span *ngIf="filterByType === 'labels'"
                        ><hbr-label-piece
                            [label]="selectedValue"></hbr-label-piece
                    ></span>
                    <span *ngIf="filterByType !== 'labels'">{{
                        selectedValue
                    }}</span>
                </span>
            </div>
            <div class="dropdown-menu">
                <ng-container
                    *ngIf="filterByType === multipleFilter[0].filterBy">
                    <div
                        (click)="selectValue(item)"
                        class="dropdown-item"
                        *ngFor="let item of multipleFilter[0].listItem">
                        {{ item.showItem | translate }}
                    </div>
                </ng-container>
                <ng-container
                    *ngIf="filterByType === multipleFilter[1].filterBy">
                    <div
                        (click)="selectValue(item)"
                        class="dropdown-item"
                        *ngFor="let item of multipleFilter[1].listItem">
                        {{ item.showItem | translate }}
                    </div>
                </ng-container>
                <ng-container
                    *ngIf="filterByType === multipleFilter[2].filterBy">
                    <label class="clr-control-label">{{
                        'REPOSITORY.FILTER_ARTIFACT_BY_LABEL' | translate
                    }}</label>
                    <app-label-selector
                        (clickLabel)="selectValue($event)"
                        [scope]="'p'"
                        [projectId]="projectId"
                        [dropdownOpened]="dropdownOpened"
                        [width]="200"
                        [ownedLabels]="getSelectLabel()">
                    </app-label-selector>
                </ng-container>
            </div>
        </div>
    </ng-container>
    <span class="filter-divider" *ngIf="withDivider"></span>
</div>
