<style>
    #rvx-storefront-widget p {
        margin: 0;
    }
    #rvx-storefront-widget .rvx-review-info p {
        margin-bottom: 5px;
    }

    [x-cloak] {
        display: none !important;
    }
</style>
<div id="rvx-storefront-widget"
          x-data="{
         ...__reviewXState__(),
         isRvxUserLoggedIn: '{{ user_is_logged_in }}'
     }"
     x-init="await initialize({data: '{{ data }}', formLevelData: '{{ formLevelData }}'})"
     @notify-attachment="notifyAttachmentAdded($event.detail.reviewAttachFiles)"
     @notify-close-success-modal="showReviewSuccessModal = false"
     @notify-like-dislike="await fetchReviews({productId: rvxAttributes.product.id})">
    <div x-show="fetchReviewsSettingsIsLoading" class="rvx-mb-space16">
        {% include "storefront/widget/Components/Skeleton/SummarySkeleton.twig" %}
    </div>
    <template x-if="!fetchReviewsSettingsIsLoading" x-cloak>
        <div class="rvx-mt-6">
            {% include "storefront/widget/Features/Aggregations/index.twig" %}

            {% include "storefront/widget/Components/RecommendedBanner.twig" %}

            <div class="rvx-w-full rvx-h-[2px] rvx-bg-neutral-100 rvx-rounded-full" :class="`${!reviewSettingsData?.data?.setting?.review_settings?.reviews?.multicriteria?.enable ? 'rvx-mb-space40' : 'rvx-mb-space12'}`"></div>

            {% include "storefront/widget/Features/MultriCriteriaAggregation/index.twig" %}
        </div>
    </template>

    <template x-if="haveReviews || isFiltering">
        <div>
            {% include 'storefront/widget/Features/Reviews/Filter/ReviewFilter.twig' %}
        </div>
    </template>

    <template x-if="fetchReviewsIsLoading">
            {% include "storefront/widget/Components/Skeleton/ReviewListSkeleton.twig" %}
    </template>


    <template x-if="haveReviews && !fetchReviewsIsLoading && !fetchReviewsSettingsIsLoading" x-cloak>
        <div>
            {% include "storefront/widget/Features/Reviews/ReviewsLayout.twig" %}

            {% include "storefront/widget/Features/Reviews/Modals/ReviewDetailModal.twig" %}
        </div>
    </template>

    <template x-if="!haveReviews && !fetchReviewsIsLoading" x-cloak>
        <div class="rvx-bg-neutral-100 rvx-py-[64px] rvx-px-space24 rvx-rounded-md rvx-text-center">
            {% include "storefront/widget/Components/EmptyPlaceholder.twig" %}
        </div>
    </template>

    {% include "storefront/widget/Features/Reviews/Modals/ReviewSuccessModal.twig" %}

    <!-- Error Toast Notification -->
    <div x-show="showErrorToastMessage" 
         x-transition:enter="rvx-transition rvx-ease-out rvx-duration-300"
         x-transition:enter-start="rvx-opacity-0 rvx-translate-y-4"
         x-transition:enter-end="rvx-opacity-100 rvx-translate-y-0"
         x-transition:leave="rvx-transition rvx-ease-in rvx-duration-200"
         x-transition:leave-start="rvx-opacity-100 rvx-translate-y-0"
         x-transition:leave-end="rvx-opacity-0 rvx-translate-y-4"
         class="rvx-fixed rvx-bottom-5 rvx-right-5 rvx-z-[100] rvx-max-w-sm rvx-bg-red-50 rvx-border rvx-border-red-200 rvx-rounded-lg rvx-shadow-lg rvx-p-4"
         x-cloak>
        <div class="rvx-flex rvx-items-center rvx-gap-3">
            <span class="material-symbols-rounded rvx-text-red-500">error</span>
            <p class="rvx-text-red-700 rvx-text-sm rvx-font-medium" x-text="errorToastMessage"></p>
            <button @click="showErrorToastMessage = false" class="rvx-text-red-400 hover:rvx-text-red-600 rvx-ml-auto">
                <span class="material-symbols-rounded rvx-text-lg">close</span>
            </button>
        </div>
    </div>

    <div x-show="!fetchReviewsIsLoading || !fetchReviewsSettingsIsLoading" x-cloak>
        {% if not requireSignIn or (requireSignIn and user_is_logged_in) %}
            {% if not wooVerificationRequired or (wooVerificationRequired and user_is_logged_in and isVerifiedCustomer) %}
                {% include "storefront/widget/Features/ReviewForm/index.twig" %}
            {% else %}
                {% include "storefront/widget/Components/UnVerifyUserPlaceholder.twig" %}
            {% endif %}
        {% else %}
            <div class="rvx-grid rvx-place-content-center rvx-rounded-md rvx-mt-space20 rvx-p-space6 rvx-bg-neutral-200 rvx-h-[186px]">
                <p class="rvx-text-gray-600">
                    Please 
                    <a href="{{ login_url }}" class="rvx-text-blue-500 hover:rvx-text-blue-700 rvx-font-semibold rvx-underline">
                        log in
                    </a> 
                    to submit a review.
                </p>
                {% if registration_enabled %}
                    <p class="rvx-text-gray-600">
                        Don't have an account? 
                        <a href="{{ register_url }}" class="rvx-text-green-500 hover:rvx-text-green-700 rvx-font-semibold rvx-underline">
                            Register here
                        </a>.
                    </p>
                {% endif %}
            </div>
        {% endif %}
    </div>

</div>