@if (filesCount) {
    @let fileCountClass =
        {
            'c-pointer text-hover-black text-color-grey svg-hover-black background-hover-dark-2':
                !isCardView,
            'flex-column h-40': hasCount && isCardView,
            'w-26': (!hasCount && !isCardView) || (hasCount && isCardView),
            'w-46 h-26': hasCount && !isCardView,
            'h-26': !hasCount && !isCardView,            
        };

    <div
        class="d-flex align-items-center justify-content-center p-4 br-2"
        [ngClass]="fileCountClass"
        ngbTooltip
        [mainCaTooltip]="'Document'"
        [tooltipBackground]="eColor.BLACK"
        [position]="ePosition.BOTTOM"
        (click)="onFilesCountClick(rowId)"
    >
        <svg-icon
            class="svg-size-18 svg-fill-grey d-flex align-items-center"
            [class.m-r-4]="!isCardView"
            [class.m-b-2]="isCardView"
            [src]="sharedSvgRoutes.FILES_ICON"
        ></svg-icon>

        @if (hasCount) {
            <div class="d-flex align-items-center justify-content-center w-16 h-14">
                <span
                    class="text-size-11 text-center ca-font-bold"
                >
                    {{ filesCount }}
                </span>
            </div>
        }
    </div>
}