@let hasItems = !!itemsTotalCount;
@let hasSelectedItems = !!itemsSelectedCount;
@let hasSelectedAllItems =
    itemsTotalCount && itemsTotalCount === itemsSelectedCount;

@let formattedItemsSelectedCount = itemsSelectedCount! | addThousandSign;

@let checkboxCount =
    itemsSelectedCount ? formattedItemsSelectedCount : eStringPlaceholder.EMPTY;

@let selectAllTooltip =
    hasItems
        ? eGeneralActions.SELECT_ALL +
          ' (' +
          (itemsTotalCount! | addThousandSign) +
          ')'
        : eStringPlaceholder.EMPTY;

@let selectRemainingTooltip =
    eGeneralActions.SELECT_REMAINING +
    ' (' +
    (itemsTotalCount! - itemsSelectedCount! | addThousandSign) +
    ')';

@let clearSelectedTooltip =
    eGeneralActions.CLEAR_SELECTED + ' (' + formattedItemsSelectedCount + ')';

@let checkboxCountTooltip =
    hasSelectedAllItems
        ? clearSelectedTooltip
        : hasSelectedItems
          ? selectRemainingTooltip
          : selectAllTooltip;

@let checkboxCountClickAction =
    hasSelectedAllItems
        ? eGeneralActions.CLEAR_SELECTED
        : hasSelectedItems
          ? eGeneralActions.SELECT_REMAINING
          : eGeneralActions.SELECT_ALL;
<div
    class="d-flex justify-content-center min-w-18 h-18"
    [ngClass]="isTableHeader ? 'align-items-end' : 'align-items-center'"
>
    <div
        class="d-flex align-items-center justify-content-center br-2 checkbox-selected-count"
        [ngClass]="
            { hasItems, hasSelectedItems, itemsSelectedCount }
                | checkboxSelectedCountClass
        "
        ngbTooltip
        [mainCaTooltip]="checkboxCountTooltip"
        [tooltipBackground]="eColor.BLACK"
        [position]="ePosition.BOTTOM"
        (mouseenter)="hasSelectedItems && handleCheckboxCountHover(true)"
        (mouseleave)="hasSelectedItems && handleCheckboxCountHover()"
        (click)="handleCheckboxCountClick(checkboxCountClickAction)"
    >
        @if (hasSelectedItems && isCheckboxCountHovered) {
            @let checkboxCountIcon =
                hasSelectedAllItems
                    ? sharedSvgRoutes.CLEAR_SELECTED_ICON
                    : sharedSvgRoutes.SELECT_REMAINING_ICON;

            @let checkboxCountIconClass =
                hasSelectedAllItems ? 'svg-size-10' : 'svg-size-14';

            <p class="text-size-11 text-color-white ca-font-bold opacity-0">
                {{ checkboxCount }}
            </p>
            
            <svg-icon
                class="svg-fill-white position-absolute d-flex"
                [class]="checkboxCountIconClass"
                [src]="checkboxCountIcon"
            ></svg-icon>
        } @else {
            <p class="text-size-11 text-color-white ca-font-bold">
                {{ checkboxCount }}
            </p>
        }
    </div>
</div>