<div x-data="{
         ...__reviewXState__(),  // Spread the state from the function
         rawTitle: '{{ title }}',    // Set the title from Twig
     }"
     id="review-summary-container" 
     class="rvx-container rvx-mx-auto"
     x-init="
         // Initialize the review summary
         await initializeReviewSummaryShortCodes({ data: '{{ data }}' });
     ">
    <style>
        .rvx-review-form__star-active {
            fill: #ecbb09;
        }
        .rvx-review-form__star-inactive {
            fill: gray;
        }
    </style>

    <!-- Title -->
    <h2 x-show="rawTitle !== 'false'"
        x-cloak
        class="rvx-text-1xl rvx-font-bold rvx-mb-[10px!important] rvx-mt-[5px!important]"
        x-text="rawTitle">
    </h2>

    <div id="rvx-review-summary"
         class="rvx-flex rvx-justify-between rvx-items-center">
        <div class="rvx-space-y-space8">
            <div class="rvx-flex rvx-gap-space12 rvx-items-center">
                <div class="rvx-flex">
                    <p x-text="reviewAggregationData?.data?.aggregation?.total_avg_review"
                       class="rvx-rating-out-of rvx-mb-[0px!important] 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-rating !rvx-text-[24px] rvx-font-normal rvx-leading-[38px] rvx-font-nunito rvx-text-neutral-400">
                        /5
                    </span>
                </div>
                <div x-show="reviewSettingsData?.data?.setting?.widget_settings.display_badges"
                     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</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</span>
                </div>
            </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-[17.577px] rvx-font-normal rvx-leading-[28.562px]">
                <span>Total</span>
                <span x-text="reviewAggregationData?.data?.aggregation?.total_reviews"></span> reviews
            </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>
</div>