@let popoverClass =
    'sort-dropdown-popover ' +
    dropdownPosition +
    eStringPlaceholder.WHITESPACE +
    customPopoverClass;

<div
    class="sort-dropdown-main-container d-flex align-items-center gap-1"
    [class.onDarkBackground]="isDarkVariation"
    [class.active]="isDropdownOpen"
    #t2="ngbPopover"
    [ngbPopover]="sortDropdownPopover"
    [placement]="dropdownPosition"
    [triggers]="'manual'"
    autoClose="outside"
    [popoverClass]="popoverClass"
    (hidden)="onHide()"
>
    @let textSizeClass = isLargeVariation ? 'text-size-14' : 'text-size-11';
    @let textColorClass =
        isDropdownOpen ? 'text-color-white' : 'text-color-black';

    <div
        class="sort-column-name-container d-flex align-items-center p-l-6"
        [ngClass]="isLargeVariation ? 'h-26' : 'h-18'"
        (click)="openClosePopover(t2)"
    >
        <div
            class="sort-column-name-text ca-font-medium"
            [ngClass]="[textSizeClass, textColorClass]"
            ngbTooltip
            [mainCaTooltip]="'Sort By'"
            [tooltipBackground]="
                isDarkVariation ? eColor.LIGHT_GREY : eColor.BLACK
            "
            [tooltipColor]="isDarkVariation ? eColor.DARK_GREY : eColor.WHITE"
            position="bottom"
        >
            {{ activeSortColumn?.name }}
        </div>
    </div>
    <div
        class="sort-arrows-container d-flex align-items-center justify-content-center background-hover-blue-16"
        [ngClass]="{
            'w-26 h-26': isLargeVariation,
            'w-18 h-18': !isLargeVariation,
            'svg-hover-blue-15': !isDropdownOpen,
        }"
        (click)="!isDropdownOpen ? sortDirectionChange() : {}"
        ngbTooltip
        [mainCaTooltip]="sortDirection === 'asc' ? 'Ascending' : 'Descending'"
        [disableTooltip]="isDropdownOpen"
        [tooltipBackground]="isDarkVariation ? eColor.LIGHT_GREY : eColor.BLACK"
        [tooltipColor]="isDarkVariation ? eColor.DARK_GREY : eColor.WHITE"
        position="bottom"
    >
        @if (isDropdownOpen) {
            @let svgSizeClass =
                isLargeVariation ? 'svg-size-14' : 'svg-size-10';

            <svg-icon
                class="dropdown-arrow d-flex"
                [ngClass]="svgSizeClass"
                [class.rotate-right]="
                    ['right', 'right-top'].includes(dropdownPosition)
                "
                [src]="sortDropdownSvgRoutes.sortDropArrowRoute"
            ></svg-icon>
        } @else {
            @let svgSizeClass =
                isLargeVariation ? 'svg-size-18' : 'svg-size-14';

            <svg-icon
                class="direction-arrow d-flex svg-fill-blue-13"
                [ngClass]="svgSizeClass"
                [class.ascending-icon]="sortDirection === 'asc'"
                [src]="sortDropdownSvgRoutes.sortDirectionRouteDESC"
            ></svg-icon>
        }
    </div>
</div>

<ng-template #sortDropdownPopover>
    <div
        class="sort-popover d-flex flex-column gap-1"
        [ngStyle]="{ width: dropdownWidth + 'px' }"
        [ngClass]="{ 'small-variation': !isLargeVariation }"
    >
        @for (column of _sortColumns; let indx = $index; track indx) {
            @let isActiveSortColumn = column.name === activeSortColumn?.name;
            <div
                class="sort-popover-item d-flex align-items-center justify-content-between"
                [ngClass]="{
                    active: isActiveSortColumn,
                    disabled: column.isDisabled,
                }"
                (click)="!column.isDisabled ? sortChangeEvent(column) : {}"
            >
                @let textColorClass =
                    column.isDisabled ? 'text-color-muted' : 'text-color-white';
                @let textWeightClass =
                    isActiveSortColumn ? 'ca-font-bold' : 'ca-font-regular';

                <div
                    class="sort-popover-item-text"
                    [ngClass]="[textColorClass, textWeightClass]"
                >
                    {{ column.name }}
                </div>

                <div class="check-icon-container d-flex">
                    @if (isActiveSortColumn) {
                        <svg-icon
                            class="check-icon d-flex svg-size-14"
                            [src]="sortDropdownSvgRoutes.checkRoute"
                        ></svg-icon>
                    }
                </div>
            </div>
        }
    </div>
</ng-template>