@if (isFilter) {
    <div
        class="ratings-filter-container d-flex flex-column justify-content-between"
    >
        @if (isSeaarch) {
            <div
                class="filter-list-container search-input-header"
                [formGroup]="searchForm"
            >
                <app-ca-input
                    class="input-form-holder"
                    formControlName="search"
                    [inputConfig]="ratingReviewSearch"
                ></app-ca-input>
            </div>
        }

        <div
            class="filter-ratings-container d-flex justify-content-between align-items-center"
        >
            <div
                class="filter-container d-flex justify-content-flex align-items-center"
            >
                <div
                    class="ratings-filter"
                    ngbTooltip
                    [tooltipBackground]="'#424242'"
                    [mainCaTooltip]="
                        isLikeClicked ? 'Remove Filter' : 'Filter Likes'
                    "
                    position="bottom"
                    (click)="
                        isLikeClicked ? removeFilters() : showFilters('likes')
                    "
                >
                    <ng-container
                        *ngTemplateOutlet="
                            ratingTemplate;
                            context: {
                                icon: 'likesButton',
                                class: 'ratings-filter d-flex align-items-center',
                                filterIcons: isLikeClicked,
                                count: likes,
                                showRemoveIcon: true,
                                conditions: {
                                    'most-likes': likes > disLikes,
                                    'has-ratings':
                                        likes > 0 && disLikes >= likes,
                                },
                            }
                        "
                    >
                    </ng-container>
                </div>
                <div
                    class="ratings-filter"
                    ngbTooltip
                    [tooltipBackground]="'#424242'"
                    [mainCaTooltip]="
                        isDisLikesClicked ? 'Remove Filter' : 'Filter Dislikes'
                    "
                    position="bottom"
                    (click)="
                        isDisLikesClicked
                            ? removeFilters()
                            : showFilters('dislikes')
                    "
                >
                    <ng-container
                        *ngTemplateOutlet="
                            ratingTemplate;
                            context: {
                                icon: 'dislikeButton',
                                class: 'ratings-filter d-flex align-items-center',
                                count: disLikes,
                                filterIcons: isDisLikesClicked,
                                showRemoveIcon: true,
                                conditions: {
                                    'most-dislikes': disLikes > likes,
                                    'has-ratings':
                                        likes >= disLikes && disLikes > 0,
                                },
                            }
                        "
                    >
                    </ng-container>
                </div>
                <div
                    class="ratings-filter"
                    ngbTooltip
                    [tooltipBackground]="'#424242'"
                    [mainCaTooltip]="
                        isDisLikesClicked ? 'Remove Filter' : 'Filter Reviews'
                    "
                    position="bottom"
                    (click)="
                        isReviewsClicked
                            ? removeFilters()
                            : showFilters('reviews')
                    "
                >
                    <ng-container
                        *ngTemplateOutlet="
                            ratingTemplate;
                            context: {
                                icon: 'reviewButton',
                                class: 'ratings-filter d-flex align-items-center',
                                count: reviews,
                                filterIcons: isReviewsClicked,
                                showRemoveIcon: true,
                                conditions: {
                                    'has-ratings': reviews > 0,
                                },
                            }
                        "
                    >
                    </ng-container>
                </div>
            </div>
            @if (ratingReviewList?.length) {
                <div
                    class="sort-date d-flex justify-content-betweenalign-items-center"
                >
                    <p (click)="sortByDate()">Date</p>
                    <svg-icon
                        class="svg-size-16"
                        [src]="getSvgPath('sortIcon')"
                        (click)="sortByDate()"
                    ></svg-icon>
                </div>
            }
        </div>

        <div
            class="filter-list-container d-flex justify-content-center flex-column"
        >
            @if (ratingReviewList?.length) {
                @let filteredList =
                    filterList | filterByTitle: searchForm.get('search')?.value;
                @for (item of filteredList; let indx = $index; track indx) {
                    <app-ca-rating-review-user
                        [isFilter]="true"
                        (ratingReviewData)="data($event)"
                        [data]="item"
                    >
                    </app-ca-rating-review-user>
                }
            }

            @if (isNewReview) {
                <app-ca-rating-review-user
                    [isNewReview]="true"
                    [isFilter]="true"
                    [data]="companyUser"
                    (ratingReviewData)="data($event)"
                >
                </app-ca-rating-review-user>
            }
        </div>
    </div>
} @else {
    <div
        class="ratings-container"
        #t2="ngbPopover"
        [ngClass]="{ popoverOpen: isPopoverOpen }"
        [ngbPopover]="ratingReviewPopover"
        triggers="manual"
        [autoClose]="'outside'"
        container="body"
        [placement]="'bottom'"
        (click)="openPopover(t2)"
        (hidden)="closePopover(t2)"
        (shown)="isPopoverOpen = true"
    >
        <div
            class="ratings-container"
            [ngClass]="{ active: isPopoverOpen }"
            ngbTooltip
            [tooltipBackground]="'#424242'"
            [mainCaTooltip]="'Rating & Review'"
            position="bottom"
            [disableTooltip]="isPopoverOpen"
        >
            <ng-container
                *ngTemplateOutlet="
                    ratingTemplate;
                    context: {
                        icon: 'likesButton',
                        class: 'ratings d-flex align-items-center',
                        count: likes,
                        showRemoveIcon: false,
                        filterIcons: false,
                        conditions: {
                            'most-likes': likes > disLikes,
                            'has-ratings': likes > 0 && disLikes >= likes,
                        },
                    }
                "
            >
            </ng-container>

            <ng-container
                *ngTemplateOutlet="
                    ratingTemplate;
                    context: {
                        icon: 'dislikeButton',
                        class: 'ratings d-flex align-items-center',
                        count: disLikes,
                        showRemoveIcon: false,
                        filterIcons: false,
                        conditions: {
                            'most-dislikes': disLikes > likes,
                            'has-ratings': likes >= disLikes && disLikes > 0,
                        },
                    }
                "
            >
            </ng-container>

            <ng-container
                *ngTemplateOutlet="
                    ratingTemplate;
                    context: {
                        icon: 'reviewButton',
                        class: 'ratings d-flex align-items-center',
                        count: reviews,
                        showRemoveIcon: false,
                        filterIcons: false,
                        conditions: {
                            'has-ratings': reviews > 0,
                        },
                    }
                "
            >
            </ng-container>

            <ng-template #ratingReviewPopover>
                <app-ca-ratings-reviews-popup
                    (emitData)="data($event)"
                    [focusedTab]="RatingReviewsType"
                    [newReviewRating]="companyUser"
                    [ratingsReviews]="ratingReviewList"
                ></app-ca-ratings-reviews-popup>
            </ng-template>
        </div>
    </div>
}
<ng-template
    #ratingTemplate
    let-icon="icon"
    let-class="class"
    let-removeIcon="showRemoveIcon"
    let-filterIcon="filterIcons"
    let-count="count"
    let-conditions="conditions"
>
    <div [ngClass]="[class, filterIcon ? 'selected-icon' : '']">
        <svg-icon
            class="svg-size-16"
            [src]="getSvgPath(icon)"
            [ngClass]="conditions"
        ></svg-icon>
        <p>{{ count }}</p>
        @if (removeIcon) {
            <svg-icon
                class="remove-icon svg-size-10"
                [src]="getSvgPath('removeSelectedValue')"
            ></svg-icon>
        }
    </div>
</ng-template>