<style>
    .rvx-aggregation-summary__star-inactive{
        fill: gray;
    }
</style>
<div
     class="rvx-flex rvx-justify-between rvx-items-center" id="rvx-storefront-widget--aggregation__summary">
    <div class="rvx-space-y-space8">
        <div class="rvx-flex rvx-gap-space12 rvx-items-center">
            <div class="rvx-flex rvx-items-baseline !rvx-leading-[0]">
                <p x-text="reviewAggregationData?.data?.aggregation?.total_avg_review"
                   class="rvx-rating-out-of rvx-average-rating rvx-flex rvx-items-baseline rvx-gap-space5 !rvx-text-[40px] rvx-font-bold rvx-leading-[38px] rvx-font-nunito rvx-text-neutral-800">
                </p>
                <span class="rvx-max-rating rvx-rating-total !rvx-text-[24px] rvx-font-normal rvx-font-nunito rvx-text-neutral-400 rvx-break-normal">
                    /5
                </span>
            </div>
            <template 
                x-if="reviewSettingsData?.data?.setting?.widget_settings?.display_badges 
                    && Number(reviewAggregationData?.data?.aggregation?.total_avg_review) >= 4">
                <div
                    class="rvx-rating-badge rvx-bg-green-500 rvx-flex rvx-items-center rvx-rounded-sm rvx-w-[123px]"
                    style="clip-path: polygon(0 0, 100% 0%, 88% 100%, 0% 100%)">
                    <span class="material-symbols-rounded rvx-fill-white rvx-text-white rvx-rating-badge__icon">
                        {{__('grade', 'reviewx')}}
                    </span>
                    <span class="rvx-rating-badge__text rvx-text-white !rvx-text-[15.38px] rvx-font-nunito rvx-font-normal rvx-leading-[24.168px]">
                        {{__('Very Good', 'reviewx')}}
                    </span>
                </div>
            </template>
        </div>
        <template x-if="reviewAggregationData?.data?.aggregation.total_avg_review">
            <div x-data="{
            reviewAverage: reviewAggregationData?.data?.aggregation.total_avg_review,
            totalRating: 5
        }" class="review rvx-flex rvx-gap-2 rvx-mb-2">

                <template x-for="star in totalRating" :key="star">
                    <div>
                        <!-- Full star -->
                        <template x-if="isFullStar(star, reviewAverage)">
                            <svg class="rvx-aggregation-summary__star-active" width="24px" height="24px" viewBox="0 0 24 24">
                                <path :fill="reviewSettingsData?.data?.setting?.widget_settings?.star_color_code" 
                                    d="M22,10.1c0.1-0.5-0.3-1.1-0.8-1.1l-5.7-0.8L12.9,3c-0.1-0.2-0.2-0.3-0.4-0.4C12,2.3,11.4,2.5,11.1,3L8.6,8.2L2.9,9C2.6,9,2.4,9.1,2.3,9.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.7c0,0.2,0,0.4,0.1,0.6c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l5.1,2.7c0.1,0.1,0.3,0.1,0.5,0.1v0c0.1,0,0.1,0,0.2,0c0.5-0.1,0.9-0.6,0.8-1.2l-1-5.7l4.1-4C21.9,10.5,22,10.3,22,10.1z" />
                            </svg>
                        </template>

                        <!-- Partial star -->
                        <template x-if="isHalfStar(star, reviewAverage)">
                            <svg class="rvx-aggregation-summary__star-active-half" width="24" height="24" viewBox="0 0 24 24">
                                <defs>
                                    <linearGradient :id="`grad-${star}`">
                                        <!-- dynamic offset -->
                                        <stop :offset="`${Math.floor(((reviewAverage - (star-1)) * 100))}%`" 
                                            :stop-color="reviewSettingsData?.data?.setting?.widget_settings?.star_color_code" />
                                        <stop :offset="`${Math.floor(((reviewAverage - (star-1)) * 100))}%`" 
                                            stop-color="grey" />
                                    </linearGradient>
                                </defs>
                                <path :fill="`url(#grad-${star})`" d="M22,10.1c0.1-0.5-0.3-1.1-0.8-1.1l-5.7-0.8L12.9,3c-0.1-0.2-0.2-0.3-0.4-0.4C12,2.3,11.4,2.5,11.1,3L8.6,8.2L2.9,9C2.6,9,2.4,9.1,2.3,9.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.7c0,0.2,0,0.4,0.1,0.6c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l5.1,2.7c0.1,0.1,0.3,0.1,0.5,0.1v0c0.1,0,0.1,0,0.2,0c0.5-0.1,0.9-0.6,0.8-1.2l-1-5.7l4.1-4C21.9,10.5,22,10.3,22,10.1z" />
                            </svg>
                        </template>

                        <!-- Empty star -->
                        <template x-if="isFullEmptyStar(star, reviewAverage)">
                            <svg class="rvx-aggregation-summary__star-inactive rvx-fill-neutral-600" fill="none" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22,10.1c0.1-0.5-0.3-1.1-0.8-1.1l-5.7-0.8L12.9,3c-0.1-0.2-0.2-0.3-0.4-0.4C12,2.3,11.4,2.5,11.1,3L8.6,8.2L2.9,9C2.6,9,2.4,9.1,2.3,9.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.7c0,0.2,0,0.4,0.1,0.6c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l5.1,2.7c0.1,0.1,0.3,0.1,0.5,0.1v0c0.1,0,0.1,0,0.2,0c0.5-0.1,0.9-0.6,0.8-1.2l-1-5.7l4.1-4C21.9,10.5,22,10.3,22,10.1z" />
                            </svg>
                        </template>
                    </div>
                </template>

            </div>
        </template>
        <p class="rvx-total-review !rvx-text-[16px] rvx-font-normal rvx-leading-[28.562px] !rvx-font-nunito rvx-text-neutral-800">
            <span>{{__('Total', 'reviewx')}}</span>
            <span x-text="reviewAggregationData?.data?.aggregation?.total_reviews"></span>
            {{__('reviews', 'reviewx')}}
        </p>
    </div>

    <div class="rvx-h-[1px] rvx-line-separator rvx-w-[155px] !rvx-bg-neutral-300" style="transform: rotate(90deg)"></div>

    {% include "storefront/widget/Features/Aggregations/aggregations.twig" %}

</div>