<div x-data="{
         ...__reviewXState__(),  // Spread the state from the function
         rawTitle: '{{ title }}',    // Set the title from Twig
     }"
     id="review-withids-container" 
     class="rvx-container rvx-mx-auto"
     x-init="
         // Initialize the review list with review IDs
         await initializeReviewWithReviewIdsShortCodes({ data: '{{ data }}' });
     "
     @notify-like-dislike="await fetchReviewListWithIdsShortCodes()">
    <style>
        #rvx-review-withids .rvx-masonry-layout {
            columns: 4 300px;
            column-gap: 16px;
        }
        #rvx-review-withids p.rvx-review-user__name {
            margin-bottom: 0px;
        }
        #rvx-review-withids p {
            margin-bottom: 5px;
        }
    </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-withids"
         :class="`${layoutView === 'masonry' && 'rvx-masonry-layout' } ${layoutView === 'grid' && 'rvx-grid rvx-grid-cols-[repeat(auto-fill,minmax(320px,1fr))] rvx-gap-space12'} ${layoutView === 'list' && 'rvx-space-y-space12'} rvx-review-wrapper`">
        <template x-for="review in reviewWithReviewIdsShortCodeData?.data?.reviews">
            <div class="rvx-rounded-md rvx-shadow-100 rvx-bg-neutral-100 rvx-columns-box rvx-review-card" 
                 :class="`${(layoutView === 'masonry' || layoutView === 'grid') ? '' : 'rvx-py-space16 rvx-pl-space16 rvx-pr-[47px]'} ${review?.is_highlighted ? 'rvx-bg-primary-10 rvx-border rvx-border-l-4 rvx-border-primary-50 rvx-border-solid'  : 'rvx-bg-neutral-100'}`">
                {% include 'storefront/widget/Features/Reviews/ReviewCard.twig' %}
            </div>
        </template>
    </div>
</div>