@if (_infoWindowContent?.clusterData) {
    @if (_infoWindowContent?.selectedClusterItemData) {
        <div
            class="marker-container relative"
            [class.expanded]="!isHidden"
            (click)="preventEventPropagation($event, true)"
            (mousewheel)="preventEventPropagation($event)"
        >
            @if (_infoWindowContent?.selectedClusterItemData?.mainContentTemplate) {
                <ng-container
                    *ngTemplateOutlet="
                        _infoWindowContent?.selectedClusterItemData?.mainContentTemplate;
                        context: {
                            data: _infoWindowContent?.selectedClusterItemData
                                .data,
                            isCluster: true,
                        }
                    "
                ></ng-container>
            } @else {
                @for (
                    item of _infoWindowContent?.selectedClusterItemData
                        .mainContent;
                    let i = $index;
                    track i
                ) {
                    <ng-container
                        *ngTemplateOutlet="
                            dropdownContentTemplate;
                            context: {
                                content: item,
                                data: _infoWindowContent
                                    ?.selectedClusterItemData.data,
                                isCluster: true,
                            }
                        "
                    ></ng-container>
                }
            }

            <div class="expanded-info" [class.active]="!isHidden">
                @if (_infoWindowContent?.selectedClusterItemData?.expandedContentTemplate) {
                    <ng-container
                        *ngTemplateOutlet="
                            _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate;
                            context: {
                                data: _infoWindowContent
                                    ?.selectedClusterItemData.data,
                            }
                        "
                    ></ng-container>
                } @else {
                    @for (
                        item of _infoWindowContent?.selectedClusterItemData
                            .expandedContent;
                        let i = $index;
                        track i
                    ) {
                        <ng-container
                            *ngTemplateOutlet="
                                dropdownContentTemplate;
                                context: {
                                    content: item,
                                    data: _infoWindowContent
                                        ?.selectedClusterItemData.data,
                                }
                            "
                        ></ng-container>
                    }
                }
            </div>

            @if (
                _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate ||
                _infoWindowContent?.expandedContentTemplate ||
                _infoWindowContent?.expandedContent?.length
            ) {
                <div
                    class="dropdown-arrow align-self-end"
                    [class.rotate-arrow]="!isHidden"
                >
                    <svg-icon
                        [src]="mapDropdownSvgRoutes.cornerDownArrowRoute"
                        (click)="showHiddenData($event)"
                    ></svg-icon>
                </div>
            }
        </div>
    } @else {
        <div
            class="cluster-marker-container d-flex flex-column gap-1"
            (click)="preventEventPropagation($event, true)"
            (mousewheel)="onClusterListScroll($event)"
        >
            @for (
                item of _infoWindowContent?.clusterData;
                let i = $index;
                track i
            ) {
                <ng-container
                    *ngTemplateOutlet="
                        clusterContentTemplate;
                        context: {
                            content: item,
                        }
                    "
                ></ng-container>
            }
        </div>
    }
} @else {
    <div
        class="marker-container relative"
        [class.expanded]="!isHidden || _infoWindowContent?.isAlwaysExpanded"
        (click)="preventEventPropagation($event, true)"
        (mousewheel)="preventEventPropagation($event)"
    >
        @if (_infoWindowContent?.mainContentTemplate) {
            <ng-container
                *ngTemplateOutlet="
                    _infoWindowContent!.mainContentTemplate!;
                    context: {
                        data: _markerData,
                    }
                "
            ></ng-container>
        } @else {
            @for (
                item of _infoWindowContent?.mainContent;
                let i = $index;
                track i
            ) {
                <ng-container
                    *ngTemplateOutlet="
                        dropdownContentTemplate;
                        context: {
                            content: item,
                            data: _markerData,
                        }
                    "
                ></ng-container>
            }
        }

        <div class="expanded-info" [class.active]="!isHidden">
            @if (_infoWindowContent?.expandedContentTemplate) {
                <ng-container
                    *ngTemplateOutlet="
                        _infoWindowContent!.expandedContentTemplate!;
                        context: {
                            data: _markerData,
                        }
                    "
                ></ng-container>
            } @else {
                @for (
                    item of _infoWindowContent?.expandedContent;
                    let i = $index;
                    track i
                ) {
                    <ng-container
                        *ngTemplateOutlet="
                            dropdownContentTemplate;
                            context: {
                                content: item,
                                data: _markerData,
                            }
                        "
                    ></ng-container>
                }
            }
        </div>

        @if (
            _infoWindowContent?.expandedContentTemplate ||
            _infoWindowContent?.expandedContent?.length
        ) {
            <div
                class="dropdown-arrow align-self-end"
                [class.rotate-arrow]="!isHidden"
            >
                <svg-icon
                    [src]="mapDropdownSvgRoutes.cornerDownArrowRoute"
                    (click)="showHiddenData($event)"
                ></svg-icon>
            </div>
        }
    </div>
}

<ng-template #clusterContentTemplate let-content="content">
    @let item = content | mapDropdownClusterContentType;
    @if (item) {
        <div
            class="d-flex align-items-center justify-content-between cluster-marker-item"
            (click)="clusterItemClick(item)"
        >
            <div
                class="d-flex align-items-center gap-1"
                [ngStyle]="{
                    'max-width': item.favourite ? 'calc(100% - 18px)' : '100%',
                }"
            >
                @if (item.isClosed) {
                    <svg-icon
                        class="d-flex svg-size-18"
                        [src]="mapDropdownSvgRoutes.permanentlyClosedRoute"
                    ></svg-icon>
                }
                <div
                    class="regular-text dark-gray-text text-uppercase text-ellipsis"
                >
                    {{ item.name }}
                </div>
            </div>

            @if (item.favourite) {
                <svg-icon
                    class="d-flex svg-size-18"
                    [src]="mapDropdownSvgRoutes.favoriteRoute"
                ></svg-icon>
            }
        </div>
    }
</ng-template>

<ng-template #dropdownContentTemplate let-content="content" let-data="data">
    @let item = content | mapDropdownContentType;
    @if (item) {
        @if (!item.sideBySideInfo) {
            <ng-container
                *ngTemplateOutlet="
                    dropdownContentItemTemplates;
                    context: {
                        content: item,
                        data: data,
                    }
                "
            ></ng-container>
        } @else {
            <!-- Side by Side Data -->
            <div class="d-flex align-items-center">
                <!-- Left Side -->
                @if (item.sideBySideInfo.leftSide) {
                    <div class="flex-1">
                        <ng-container
                            *ngTemplateOutlet="
                                dropdownContentItemTemplates;
                                context: {
                                    content: item.sideBySideInfo?.leftSide,
                                    data: data,
                                }
                            "
                        >
                        </ng-container>
                    </div>
                }

                <!-- Right Side -->
                @if (item.sideBySideInfo.rightSide) {
                    <div class="flex-1">
                        <ng-container
                            *ngTemplateOutlet="
                                dropdownContentItemTemplates;
                                context: {
                                    content: item.sideBySideInfo?.rightSide,
                                    data: data,
                                }
                            "
                        >
                        </ng-container>
                    </div>
                }
            </div>
        }
    }
</ng-template>

<ng-template
    #dropdownContentItemTemplates
    let-content="content"
    let-data="data"
>
    @let item = content | mapDropdownContentType;
    @if (item) {
        @switch (item?.template) {
            @case (eMapDropdownString.HEADER_TITLE) {
                <div
                    class="heading d-flex justify-content-between align-items-center {{
                        item.customClassContainer
                    }}"
                >
                    <div
                        class="header-text-container d-flex align-items-center gap-1 w-100"
                    >
                        @if (item.hasBackButton) {
                            <div
                                class="header-back-button d-flex align-items-center justify-content-center"
                                (click)="backButtonClick($event)"
                            >
                                <svg-icon
                                    class="d-flex svg-size-14"
                                    [src]="mapDropdownSvgRoutes.backButtonRoute"
                                >
                                </svg-icon>
                            </div>
                        }

                        <span
                            class="header ca-font-extra-bold dark-gray-text {{
                                item.customClassText
                            }}"
                        >
                            {{ data | mapDropdownValue: item }}
                        </span>
                    </div>
                </div>
            }

            <!-- Rating Review -->
            @case (eMapDropdownString.RATING_REVIEW) {
                <div
                    class="d-flex justify-content-start align-items-center align-content-center gap-3 {{
                        item.customClassContainer
                    }}"
                >
                    <div
                        class="d-flex justify-content-start align-items-center gap-2"
                        [class.opacity-40]="!data[item.field].likeCount"
                    >
                        <svg-icon
                            class="rating-icon like-icon d-flex svg-size-14"
                            [class.active]="data[item.field].hasLiked"
                            [src]="mapDropdownSvgRoutes.likeRoute"
                        ></svg-icon>
                        <span
                            class="small-text dark-gray-text ca-font-semi-bold user-select-none"
                            >{{ data[item.field].likeCount }}
                        </span>
                    </div>
                    <div
                        class="d-flex justify-content-start align-items-center gap-2"
                        [class.opacity-40]="!data[item.field].dislikeCount"
                    >
                        <svg-icon
                            class="rating-icon dislike-icon d-flex svg-size-14"
                            [class.active]="data[item.field].hasDislike"
                            [src]="mapDropdownSvgRoutes.dislikeRoute"
                        ></svg-icon>
                        <span
                            class="small-text dark-gray-text ca-font-semi-bold user-select-none"
                            >{{ data[item.field].dislikeCount }}
                        </span>
                    </div>
                    <div
                        class="d-flex justify-content-start align-items-center gap-2"
                        [class.opacity-40]="!data[item.field].reviewCount"
                    >
                        <svg-icon
                            class="rating-icon review-icon d-flex svg-size-14"
                            [src]="mapDropdownSvgRoutes.reviewRoute"
                        ></svg-icon>
                        <span
                            class="small-text dark-gray-text ca-font-semi-bold user-select-none"
                            >{{ data[item.field].reviewCount ?? 0 }}
                        </span>
                    </div>
                </div>
            }

            <!-- Border Divider -->
            @case (eMapDropdownString.DIVIDER) {
                <div class="info-divider"></div>
            }

            <!-- Repair Shop Services -->
            @case (eMapDropdownString.REPAIR_SHOP_SERVICES) {
                <div
                    class="d-flex align-items-center justify-content-between {{
                        item.customClassContainer
                    }}"
                >
                    @for (
                        service of data[item.field];
                        let i = $index;
                        track i
                    ) {
                        <div
                            class="d-flex align-items-center justify-content-center"
                            ngbTooltip
                            [tooltipBackground]="'#424242'"
                            [mainCaTooltip]="service.serviceType.name"
                            position="bottom"
                        >
                            <svg-icon
                                class="repair-service-icon svg-size-18"
                                [class.active]="service.active"
                                [src]="
                                    service.logoName
                                        | caSvg: 'common' : 'repair-services'
                                "
                            ></svg-icon>
                        </div>
                    }
                </div>
            }

            <!-- Icon and Text -->
            @case (eMapDropdownString.ICON_TEXT) {
                <div
                    class="d-flex align-items-start gap-1 {{
                        item.customClassContainer
                    }}"
                >
                    @if (item.url) {
                        <div
                            ngbTooltip
                            [tooltipBackground]="'#424242'"
                            [mainCaTooltip]="item.iconTooltipText"
                            position="bottom"
                            [disableTooltip]="!item.iconTooltipText"
                        >
                            <svg-icon
                                class="d-flex align-items-center justify-content-center svg-size-18"
                                [src]="item.url"
                            ></svg-icon>
                        </div>
                    }

                    <span
                        class="regular-text dark-gray-text {{
                            item.customClassText
                        }}"
                    >
                        {{
                            item.isDate
                                ? (data[item.field] | date: 'MM/dd/yy')
                                : (data | mapDropdownValue: item)
                        }}
                    </span>
                </div>
            }

            <!-- Title -->
            @case (eMapDropdownString.TITLE) {
                <div
                    class="regular-text dark-gray-text ca-font-extra-bold {{
                        item.customClassText
                    }}"
                >
                    {{ data | mapDropdownValue: item }}
                </div>
            }

            <!-- Title and Count -->
            @case (eMapDropdownString.TITLE_COUNT) {
                <div
                    class="d-flex align-items-center gap-1 {{
                        item.customClassContainer
                    }}"
                >
                    <div class="regular-text dark-gray-text ca-font-extra-bold">
                        {{ item.title }}
                    </div>
                    <div
                        class="count-number white-text d-flex align-items-center justify-content-center ca-font-bold"
                    >
                        {{
                            item.isDuration
                                ? (data[item.field] | formatDuration)
                                : (data | mapDropdownValue: item)
                        }}
                    </div>
                </div>
            }

            <!-- Money Text  -->
            @case (eMapDropdownString.MONEY_TEXT) {
                <div
                    class="d-flex align-items-center gap-1 {{
                        item.customClassContainer
                    }}"
                >
                    <div class="regular-text ca-font-bold blue-text">
                        {{
                            data?.[item.field] !== ''
                                ? (data[item.field] | formatCurrency)
                                : '$0'
                        }}
                    </div>
                    <div class="regular-text light-gray-text ca-font-bold">
                        {{ item.title }}
                    </div>
                </div>
            }

            <!-- Open Hours -->
            @case (eMapDropdownString.OPEN_HOURS) {
                <div class="d-flex flex-column gap-2">
                    <div
                        class="regular-text dark-gray-text ca-font-extra-bold {{
                            item.customClassText
                        }}"
                    >
                        {{ item.title }}
                    </div>
                    <div class="open-hours-grid">
                        @if (
                            data[item.field]?.openHoursToday &&
                            !isShowAllDaysActive
                        ) {
                            <div class="d-flex flex-column flex-1">
                                <div
                                    class="small-text dark-gray-text ca-font-bold"
                                >
                                    {{ data[item.field].openHoursToday.status }}
                                </div>
                                <div
                                    class="regular-text dark-gray-text text-ellipsis"
                                >
                                    {{ data[item.field].openHoursToday.info }}
                                </div>
                            </div>
                        }

                        @if (data[item.field]?.openHours?.length) {
                            @if (isShowAllDaysActive) {
                                @for (
                                    day of data[item.field].openHours;
                                    let i = $index;
                                    track i
                                ) {
                                    <div class="d-flex flex-column flex-1">
                                        <div
                                            class="small-text dark-gray-text ca-font-bold"
                                        >
                                            {{ day.dayOfWeek }}
                                        </div>
                                        <div
                                            class="regular-text dark-gray-text text-ellipsis"
                                        >
                                            {{
                                                day.startTime +
                                                    ' - ' +
                                                    day.endTime
                                            }}
                                        </div>
                                    </div>
                                }
                            }
                            <div
                                class="d-flex flex-column flex-1 justify-content-end show-all-days-container"
                            >
                                <div
                                    class="d-flex align-items-center gap-1"
                                    (click)="showAllDaysClick()"
                                >
                                    <svg-icon
                                        class="d-flex svg-size-14"
                                        [src]="
                                            mapDropdownSvgRoutes.accidentCalenderRoute
                                        "
                                    ></svg-icon>
                                    <div
                                        class="regular-text gray-text cursor-pointer"
                                    >
                                        {{
                                            isShowAllDaysActive
                                                ? 'Show today'
                                                : 'Show all days'
                                        }}
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            }

            <!-- Text and Count -->
            @case (eMapDropdownString.TEXT_COUNT) {
                <div
                    class="d-flex align-items-center gap-1 {{
                        item.customClassContainer
                    }}"
                >
                    <div class="regular-text {{ item.customClassText }}">
                        {{ item.title }}
                    </div>
                    <div
                        class="regular-text ca-font-semi-bold {{
                            item.customClassText
                        }}"
                    >
                        {{ data | mapDropdownValue: item }}
                    </div>
                </div>
            }

            <!-- Subtitle -->
            @case (eMapDropdownString.SUBTITLE) {
                <div
                    class="regular-text dark-gray-text ca-font-extra-bold {{
                        item.customClassText
                    }}"
                >
                    {{ item.title }}
                </div>
            }

            <!-- Regular Text -->
            @case (eMapDropdownString.TEXT) {
                <div class="regular-text black-text {{ item.customClassText }}">
                    {{
                        item.isDate
                            ? (data[item.field] | date: 'MM/dd/yy hh:mm a')
                            : (data | mapDropdownValue: item)
                    }}
                </div>
            }

            <!-- Small Subtitle -->
            @case (eMapDropdownString.SMALL_SUBTITLE) {
                <div
                    class="small-text dark-gray-text {{ item.customClassText }}"
                >
                    {{ item.title }}
                </div>
            }

            <!-- Date -->
            @case (eMapDropdownString.DATE) {
                <div class="regular-text black-text {{ item.customClassText }}">
                    {{ data[item.field] | date }}
                </div>
            }

            <!-- Fuel Price Range -->
            @case (eMapDropdownString.FUEL_PRICE_RANGE) {
                @if (fuelPriceRangeData) {
                    <div
                        class="d-flex align-items-center justify-content-between gap-1"
                    >
                        <div class="d-flex flex-column">
                            <div
                                class="text-size-14 ca-font-semi-bold"
                                [ngClass]="
                                    fuelPriceRangeData.priceOutDated
                                        ? 'text-color-muted'
                                        : 'text-color-black'
                                "
                            >
                                {{
                                    fuelPriceRangeData.pricePerGallon
                                        | formatCurrency
                                }}
                            </div>
                            <div class="text-size-11 text-color-muted">
                                {{
                                    fuelPriceRangeData.dieselLastUsed
                                        | dateFromStringPipe: 'time-ago'
                                }}
                            </div>
                        </div>

                        <app-ca-last-fuel-price-progress
                            [lastFuelPriceData]="fuelPriceRangeData"
                        ></app-ca-last-fuel-price-progress>
                    </div>
                }
            }

            <!-- Miles Stop Type -->
            @case (eMapDropdownString.STOP_TYPE) {
                <div class="regular-text {{ item.customClassText }}">
                    {{ data | mapDropdownValue: item }}

                    @if (data.businessName) {
                        <span
                            class="text-size-14 ca-font-medium text-color-muted text-uppercase"
                            >- {{ data.businessName }}</span
                        >
                    }
                </div>
            }

            <!-- Travel Time -->
            @case (eMapDropdownString.TRAVEL_TIME) {
                <div class="regular-text {{ item.customClassText }}">
                    {{
                        {
                            days: 0,
                            hours: data[item.field],
                            minutes: data[item.secondField!],
                            seconds: 0,
                        } | formatDuration
                    }}
                </div>
            }
        }
    }
</ng-template>