<div [style.width.px]="width">
    <div class="clr-input-wrapper filter-label-input">
        <input
            class="clr-input"
            type="text"
            autocomplete="off"
            placeholder="{{ 'LABEL.FILTER_LABEL_PLACEHOLDER' | translate }}"
            [(ngModel)]="searchValue"
            (keyup)="search()" />
    </div>
    <div class="no-labels" [hidden]="!loading">
        <span class="spinner spinner-inline"></span>
    </div>
    <div [hidden]="loading">
        <div
            [hidden]="candidateLabels.length"
            class="no-labels"
            (click)="goToLabelPage()">
            {{ 'LABEL.NO_LABELS' | translate }}
        </div>
        <ng-container *ngIf="usedInDropdown; else notUsedInDropdown">
            <div [hidden]="!candidateLabels.length" class="has-label">
                <button
                    clrDropdownItem
                    type="button"
                    class="dropdown-item"
                    *ngFor="let label of candidateLabels"
                    (click)="selectLabel(label)">
                    <clr-icon
                        shape="check"
                        class="check-icon"
                        [style.visibility]="
                            isSelect(label) ? 'visible' : 'hidden'
                        ">
                    </clr-icon>
                    <hbr-label-piece [label]="label" [labelWidth]="130">
                    </hbr-label-piece>
                </button>
            </div>
        </ng-container>
        <ng-template #notUsedInDropdown>
            <div [hidden]="!candidateLabels.length" class="has-label">
                <button
                    type="button"
                    class="dropdown-item"
                    *ngFor="let label of candidateLabels"
                    (click)="selectLabel(label)">
                    <clr-icon
                        shape="check"
                        class="check-icon"
                        [style.visibility]="
                            isSelect(label) ? 'visible' : 'hidden'
                        ">
                    </clr-icon>
                    <hbr-label-piece [label]="label" [labelWidth]="130">
                    </hbr-label-piece>
                </button>
            </div>
        </ng-template>
    </div>
</div>
