@let isFilterPopoverOpened = filterPopoverOpen.isOpen();
@let isFilterSelected = appliedFiltersCount;

<div
    class="d-flex align-items-center justify-content-center br-2 filter-dropdown-button"
    [ngClass]="{
        'background-black': isFilterPopoverOpened && !isDisabled,
        'background-hover-bw2':
            !isFilterSelected && !isFilterPopoverOpened && !isDisabled,
        'background-blue-14 background-hover-blue-15':
            isFilterSelected && !isDisabled,
        'filter-dropdown-count-hover': appliedFiltersCount && !isDisabled,
    }"
>
    <div
        #filterPopoverOpen="ngbPopover"
        triggers="manual"
        container="body"
        [autoClose]="'outside'"
        [ngbPopover]="popoverContent"
        [placement]="['bottom-left', 'bottom-right']"
        (hidden)="onClickOutside()"
    >
        <div
            ngbTooltip
            [mainCaTooltip]="
                isFilterPopoverOpened ? 'Close Filter' : config.tooltipText
            "
            position="bottom"
            tooltipBackground="{{
                isFilterPopoverOpened ? '#CCCCCC' : '#2F2F2F'
            }}"
            tooltipColor="{{ isFilterPopoverOpened ? '#2F2F2F' : '#FFFFFF' }}"
            tooltipTextAlign="center"
            (click)="openClosePopover(filterPopoverOpen)"
        >
            <svg-icon
                [src]="config.icon"
                class="filter-dropdown-icon d-flex align-items-center justify-content-center {{ svgCustomSizeClass }}"
                [ngClass]="{
                    'svg-fill-white-4 svg-hover-white':
                        isFilterPopoverOpened &&
                        !isFilterSelected &&
                        !isDisabled,
                    'svg-fill-blue-17 svg-hover-white':
                        isFilterSelected && !isDisabled,
                    'svg-hover-black svg-fill-muted':
                        !isFilterSelected &&
                        !isFilterPopoverOpened &&
                        !isDisabled,
                    'svg-fill-light-grey-6': isDisabled,
                    'c-pointer': !isDisabled,
                }"
            ></svg-icon>
        </div>
    </div>

    @if (appliedFiltersCount) {
        <div
            class="filter-dropdown-count d-flex align-items-center justify-content-center m-r-4"
        >
            <span
                class="text-color-white text-size-11 ca-font-extra-bold filter-dropdown-count-value"
                >{{ appliedFiltersCount }}</span
            >

            <div
                class="align-items-center justify-content-center c-pointer filter-dropdown-count-remove"
                ngbTooltip
                mainCaTooltip="Remove Filter"
                position="bottom"
                tooltipBackground="#424242"
                tooltipColor="#FFFFFF"
                tooltipTextAlign="center"
                (click)="onFilterClear()"
            >
                <svg-icon
                    [src]="caFiltersSvgRoutes.removeSelectedValue"
                    class="svg-size-10 svg-fill-white-4 svg-hover-white d-flex"
                ></svg-icon>
            </div>
        </div>
    }
</div>

<ng-template #popoverContent>
    <div class="background-black-2 br-3 p-4 filter-dropdown-popover">
        <div
            class="filter-dropdown-header p-x-4 p-t-2 p-b-4 d-flex justify-content-between align-items-center"
        >
            <div
                class="text-color-white text-size-11 ca-font-extra-bold d-flex align-items-center"
            >
                <div class="m-r-4 d-flex align-items-center">
                    <span class="m-r-4">{{
                        customTitle || config.title
                    }}</span>

                    @if (config.isDisplayCount && activeCount) {
                        <div
                            class="text-color-white text-size-11 ca-font-bold background-black p-x-5 p-y-2 br-10 filter-dropdown-list-badge text-center"
                        >
                            {{ activeCount }}
                        </div>
                    }
                </div>
            </div>

            @if (config.sortColumns.length) {
                <app-ca-sort-dropdown
                    [sortColumns]="config.sortColumns"
                    [activeSortColumn]="config.sortColumns[0]"
                    [dropdownPosition]="'right-top'"
                    [dropdownWidth]="107"
                    [isDarkVariation]="true"
                    (onSortChange)="handleSortClick($event)"
                ></app-ca-sort-dropdown>
            }
        </div>

        <ng-template [ngTemplateOutlet]="bodyTemplate"></ng-template>
        <div class="filter-dropdown-footer d-flex gap-1 m-t-4">
            <div
                class="filter-dropdown-footer-button br-1 background-dark-2 text-size-11 ca-font-bold d-flex align-items-center justify-content-center c-pointer filter-dropdown-footer-button-clear"
                (click)="onFilterClear()"
            >
                {{ customCancelButton || 'CLEAR ALL' }}
            </div>
            <div
                class="filter-dropdown-footer-button br-1 background-dark-2 text-size-11 ca-font-bold d-flex align-items-center justify-content-center"
                [ngClass]="
                    isFormChanged
                        ? 'c-pointer filter-dropdown-footer-button-set'
                        : ''
                "
                (click)="applyFilters()"
            >
                SET
            </div>
        </div>
    </div>
</ng-template>