@let isSearchActive = isAlwaysOpenSearch ? isInputFocused : openSearch;
@let isAlwaysOpenSearchAndNotFocused = isAlwaysOpenSearch && !isInputFocused;

<div class="search-chips-container d-flex">
    <div
        class="search-container d-flex"
        [ngClass]="{
            'search-input-active': isSearchActive,
            'ca-full-width': _isDetailsPageSearch,
            'background-bw2 background-hover-bw-9':
                isAlwaysOpenSearchAndNotFocused,
        }"
    >
        <!-- Icon -->
        @if (toolbarSearch) {
            <div
                class="icon-container d-flex justify-content-center align-items-center"
                [ngClass]="{ 'icon-disabled': chips.length >= 3 }"
                (click)="chips.length < 4 && toggleSearch()"
                ngbTooltip
                [mainCaTooltip]="
                    openSearch
                        ? chips.length >= 3
                            ? 'Max Added'
                            : 'Close'
                        : chips.length >= 3
                          ? 'Max Added'
                          : 'Search'
                "
                [tooltipBackground]="'#424242'"
                position="bottom"
            >
                <svg-icon
                    class="d-flex svg-size-26"
                    [src]="getSvgPath('searchButton')"
                ></svg-icon>
            </div>
        } @else {
            <div
                class="icon-container d-flex justify-content-center align-items-center"
                (click)="!isAlwaysOpenSearch && toggleSearch()"
                ngbTooltip
                [mainCaTooltip]="openSearch ? 'Close' : 'Search'"
                [tooltipBackground]="'#424242'"
                position="bottom"
                [disableTooltip]="isAlwaysOpenSearch"
            >
                <svg-icon
                    class="d-flex svg-size-26"
                    [src]="getSvgPath('searchButton')"
                ></svg-icon>
            </div>
        }

        <!-- Border -->
        <div class="icon-border d-flex align-items-center">
            <div
                class="inner-border"
                [ngClass]="{
                    'background-muted': isAlwaysOpenSearchAndNotFocused,
                    'background-light-gray-6': isSearchActive,
                }"
            ></div>
        </div>

        <!-- Search Input -->
        <div
            class="multiple-search-input d-flex justify-content-between align-items-center"
            [ngClass]="{ 'ca-full-width': _isDetailsPageSearch }"
        >
            @if (openSearch || isAlwaysOpenSearch) {
                <input
                    [disabled]="chips.length >= 3"
                    #tableSearchInput
                    id="table-search"
                    type="text"
                    (keyup)="onTyping($event)"
                    (keyup.enter)="onEnter()"
                    (focus)="onInputFocus(true)"
                    (blur)="onInputFocus(false)"
                    autofocus="!isAlwaysOpenSearch"
                    maxlength="30"
                    [(ngModel)]="searchText"
                    (ngModelChange)="capitalizeInput($event)"
                    placeholder="Find {{
                        selectedTabData.gridNameTitle
                            ? selectedTabData.gridNameTitle
                            : 'No Tab Name'
                    }}"
                />
            }
            @if (toolbarSearch && openSearch && searchText.length) {
                <div class="d-flex align-items-center btn-container">
                    <div
                        ngbTooltip
                        [mainCaTooltip]="'Confirm'"
                        [tooltipBackground]="'#424242'"
                        position="bottom"
                    >
                        <svg-icon
                            class="confirm-icon d-flex svg-size-18"
                            [src]="getSvgPath('add')"
                            (click)="onEnter()"
                        ></svg-icon>
                    </div>
                    <div
                        ngbTooltip
                        [mainCaTooltip]="'Clear'"
                        [tooltipBackground]="'#424242'"
                        position="bottom"
                    >
                        <svg-icon
                            class="clear-icon d-flex svg-size-18"
                            [src]="getSvgPath('clearSearch')"
                            (click)="onTyping($event)"
                        ></svg-icon>
                    </div>
                </div>
            }
        </div>
    </div>

    @if (chips.length) {
        <div class="chips-container d-flex">
            @if (!toolbarSearch) {
                @for (chip of chips; track $index; let i = $index) {
                    <div
                        class="chip d-flex justify-content-center align-items-center"
                        [ngClass]="i | chipClass: chips : chipToDelete"
                    >
                        {{ chip.searchText }}
                        <div
                            class="delete-chip d-flex justify-content-center align-items-center"
                            (mouseenter)="chipToDelete = i"
                            (mouseleave)="chipToDelete = -1"
                            (click)="onDeleteChip(i)"
                        >
                            <svg-icon
                                class="d-flex svg-size-6"
                                [src]="getSvgPath('clearSearch')"
                            ></svg-icon>
                        </div>
                    </div>
                }
            } @else {
                @for (chip of chips; let i = $index; track i) {
                    <div
                        class="chip d-flex justify-content-center align-items-center"
                        [ngClass]="i | chipClass: chips : chipToDelete"
                        (click)="onDeleteChip(i)"
                        ngbTooltip
                        [mainCaTooltip]="'Clear'"
                        [tooltipBackground]="'#424242'"
                        position="bottom"
                    >
                        <span>{{ chip.searchText }}</span>
                    </div>
                }
            }
            <div
                class="delete-all-chips regular-style d-flex justify-content-center align-items-center"
                [ngClass]="{ 'toolbar-style': toolbarSearch }"
                (click)="deleteAllChips()"
                ngbTooltip
                [mainCaTooltip]="'Clear all'"
                [tooltipBackground]="'#424242'"
                position="bottom"
            >
                <svg-icon
                    class="d-flex svg-size-23"
                    [src]="getSvgPath('clearSearch')"
                ></svg-icon>
            </div>
        </div>
    }
</div>