@let isLargeLayout = variant === toolbarVariant.Large;

<div
    #tabSwitchHolder
    class="d-flex gap-1 align-items-center position-relative prevent-text-selection"
>
    <div
        #tabSwitchIndicator
        class="br-3 position-absolute h-100p"
        [ngClass]="isLargeLayout ? 'background-black' : 'background-bw2'"
    ></div>

    @for (item of data; let index = $index; track index) {
        @let name = item.name;
        @let title = item.title;
        @let isSmallActive = !isLargeLayout && selectedTab === name;
        @let isSmallAndInActive = !isLargeLayout && selectedTab !== name;
        @let isLargeAndActive = isLargeLayout && selectedTab === title;
        @let isLargeAndInActive = isLargeLayout && selectedTab !== title;
        @let isDisabled = item.isDisabled;
        @let tabClasses =
            {
                isLargeLayout,
                isLargeAndActive,
                isLargeAndInActive,
                isSmallActive,
                isSmallAndInActive,
                isDisabled: isDisabled ?? false,
            } | toolbarTabsClassPipe;

        <div
            #tabSwitchItems
            class="tab-switch-items-holder c-pointer ca-font-extra-bold z-index-1 {{
                tabClasses
            }}"
            (click)="onTabClick($event, isLargeLayout ? title! : name!)"
        >
            <div
                class="title transition-color"
                [ngClass]="
                    isLargeLayout
                        ? 'title-large line-height-100'
                        : 'title-small'
                "
                [attr.data-test-id]="
                    isLargeLayout
                        ? 'table-toolbar-main-tab'
                        : 'table-toolbar-view-tab'
                "
            >
                {{ isLargeLayout ? title : name }}
            </div>

            @if (isLargeLayout) {
                @let counterText = item.length;
                @let counterClass =
                    selectedTab === title
                        ? 'background-white text-color-black'
                        : 'background-muted text-color-white';
                @let widthClass =
                    counterText && counterText > 99
                        ? 'w-20'
                        : counterText && counterText > 9
                          ? 'w-14'
                          : 'w-8';

                <div
                    class="counter transition-background-color d-flex align-items-center justify-content-center h-18 min-w-18 br-50 text-center p-x-5"
                    [ngClass]="counterClass"
                >
                    <div
                        class="font-size-11 line-height-18"
                        [ngClass]="widthClass"
                    >
                        {{ counterText }}
                    </div>
                </div>
            }
        </div>
    }
</div>