@let displayedDataCount = _viewData.length;
@let isShowMoreLoading = _isLoading && displayedDataCount;

@defer (when !_isLoading) {
    <div
        class="cards-container d-grid gap-1 m-t-7 m-r-15"
        [class.placeholder-wave]="_isLoading"
        #cardsContainer
    >
        @for (card of _viewData; let index = $index; track $index) {
            @let isCardFlipped =
                (index | isCardFlipped: isCardFlippedCheckInCards) ||
                cardsFlipType === tableCardTypes.BACK;

            <div [@fadeIn] class="br-3 flip-card">
                <div
                    class="flip-card-content position-relative w-100 h-100 transition-transform-400"
                    [class.flipped]="isCardFlipped"
                >
                    <div
                        class="flip-card-front br-3 background-white p-4 w-100 h-100"
                        [ngClass]="
                            isCardFlipped
                                ? 'position-absolute top-0 left-0'
                                : 'position-relative'
                        "
                    >
                        <ng-container
                            *ngTemplateOutlet="
                                cardContentTemplate;
                                context: {
                                    card,
                                    index,
                                    sideOfCard: _frontSide,
                                }
                            "
                        ></ng-container>
                    </div>

                    <div
                        class="flip-card-back br-3 background-white p-4 w-100 h-100"
                        [ngClass]="
                            isCardFlipped
                                ? 'position-relative'
                                : 'position-absolute top-0 left-0'
                        "
                    >
                        <ng-container
                            *ngTemplateOutlet="
                                cardContentTemplate;
                                context: {
                                    card,
                                    index,
                                    sideOfCard: _backSide,
                                }
                            "
                        ></ng-container>
                    </div>
                </div>
            </div>
        }

        @if (isShowMoreLoading) {
            @let numberOfCards =
                totalDataCount - displayedDataCount > 25
                    ? 25
                    : totalDataCount - displayedDataCount;

            <ca-table-card-view-skeleton
                #skeletonLoader
                [cardsCount]="numberOfCards"
            ></ca-table-card-view-skeleton>
        }
    </div>

    @if (displayedDataCount) {
        <div #showMoreContainer>
            <app-ca-show-more
                [displayedDataCount]="displayedDataCount"
                [totalDataCount]="totalDataCount"
                (onShowMore)="onShowMoreClick()"
            ></app-ca-show-more>
        </div>
    }
} @placeholder (minimum 800ms) {
    <ca-table-card-view-skeleton
        class="placeholder-wave cards-container d-grid gap-1 m-t-7 m-r-15"
    ></ca-table-card-view-skeleton>
}

<ng-template
    #cardContentTemplate
    let-card="card"
    let-index="index"
    let-sideOfCard="sideOfCard"
>
    <div
        class="card-body d-flex justify-content-between position-relative gap-1 br-2 p-4 h-100"
        [ngClass]="
            card.isSelected
                ? 'background-gray background-hover-gray'
                : 'background-hover-bw2'
        "
    >
        <!-- Left side of the card -->
        <div class="card-body-left d-flex flex-column gap-8">
            <!-- Head of the card -->

            <div
                class="card-header d-flex align-items-center gap-8 p-l-2 h-26"
                [ngClass]="card?.isRepairOrder ? 'with-finish-order' : 'p-r-4'"
                [class.select-hidden]="isSelectHidden"
            >
                @if (!isSelectHidden) {
                    <app-ca-checkbox
                        [name]="'checkbox' + index"
                        [isChecked]="card.isSelected"
                        [isRegularCheckbox]="false"
                        (columnCheckAction)="onCheckboxSelect(card.id)"
                    ></app-ca-checkbox>
                }

                <div
                    class="d-flex align-items-center flex-grow-1 gap-1 min-w-0"
                >
                    @if (_titleIcon) {
                        <ng-container
                            *ngTemplateOutlet="
                                _titleIcon;
                                context: { data: card }
                            "
                        ></ng-container>
                    }

                    <div
                        class="card-title text-color-black ca-font-bold text-size-14 min-w-0"
                        [ngClass]="{
                            'c-pointer text-hover-blue-15': hasDetailsPage,
                        }"
                        (click)="cardTitleClicked(card.id)"
                    >
                        <p
                            class="text-truncate"
                            ngbTooltip
                            [mainCaTooltip]="
                                hasDetailsPage
                                    ? eTableCardGeneral.VIEW_DETAILS
                                    : undefined
                            "
                            [position]="ePosition.BOTTOM"
                            [tooltipBackground]="eColor.BLACK"
                            [innerHTML]="
                                card[_cardTitle] ??
                                    eStringPlaceholder.FORWARD_SLASH
                                    | tableHighlightSearchText: _searchStrings
                            "
                        ></p>
                    </div>
                </div>

                @if (card?.isRepairOrder) {
                    <div
                        class="finish-order-btn text-size-11 text-color-blue-11 ca-font-bold p-y-4 p-x-8 br-2 c-pointer text-nowrap transition-background-300"
                        (click)="repairFinishOrder(card.id)"
                    >
                        FINISH ORDER
                    </div>
                }
            </div>

            <!-- Card body front-->

            <div
                class="card-body-content d-flex flex-column gap-2"
                #cardBodyContent
            >
                <ng-container
                    *ngTemplateOutlet="sideOfCard; context: { data: card }"
                ></ng-container>
            </div>
        </div>

        <!-- Right side of the card -->
        <div class="card-body-right d-flex flex-column">
            <div class="d-flex flex-column gap-1 flex-grow-1">
                <!-- Dropdown Menu-->

                @if (!isDropdownMenuHidden) {
                    <ca-dropdown-menu
                        [type]="'dots-menu-type'"
                        [placement]="ePosition.TABLE_CARDS_DROPDOWN_MENU"
                        [options]="dropdownMenuOptions"
                        (dropdownOptionEmitter)="
                            handleToggleDropdownMenuActions($event, card)
                        "
                    >
                    </ca-dropdown-menu>
                }

                <!-- Note element -->

                @if (_rightSideTemplate) {
                    <ng-container
                        *ngTemplateOutlet="
                            _rightSideTemplate;
                            context: { data: card }
                        "
                    ></ng-container>
                }
            </div>

            <!-- Expand element -->

            @let showBackSideCard =
                (index | isCardFlipped: isCardFlippedCheckInCards) ||
                cardsFlipType === tableCardTypes.BACK;

            @if (showBackSide) {
                <div
                    class="bottom-side d-flex justify-content-center h-26 w-26"
                    (click)="flipCard(index)"
                >
                    <span
                        class="p-t-6 p-b-2 p-l-6 p-r-2"
                        [ngClass]="
                            showBackSideCard
                                ? 'svg-hover-blue-15'
                                : 'svg-hover-black'
                        "
                        type="button"
                        ngbTooltip
                        [mainCaTooltip]="eTableCardGeneral.FLIP_CARD"
                        [position]="ePosition.BOTTOM"
                        [tooltipBackground]="eColor.BLACK"
                    >
                        <svg-icon
                            class="svg-size-18 d-flex align-items-center justify-content-center"
                            [ngClass]="{
                                'rotate-svg svg-fill-blue-13': showBackSideCard,
                            }"
                            [src]="tableCardViewSvgRoutes.flipArrowRoute"
                        ></svg-icon>
                    </span>
                </div>
            }
        </div>

        <!-- Sort by blur overlay -->
        @if (isCardSortingActive) {
            <div
                class="blur-overlay background-white-7 position-absolute top-0 start-0 end-0 bottom-0 z-3"
            ></div>
        }
    </div>
</ng-template>