{% if this.enabled %}
    <section {{ attributes.defaults({id: 'product-reviews', class: 'mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8'}) }}>
        <header class="border-b border-gray-200 pb-7">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                <div class="w-full">
                    <h2 class="text-2xl font-semibold text-gray-950">
                        {{ 'marketing.review.public.title'|trans }}
                    </h2>
                    {% if this.averageRating is not null %}
                        {% set ratingCounts = this.ratingCounts %}
                        <div class="mt-6 grid w-full max-w-2xl gap-7 sm:grid-cols-[12rem_minmax(0,1fr)] sm:items-center">
                            <div>
                                <p class="text-5xl font-semibold leading-none text-gray-950">
                                    {{ this.averageRating|number_format(1, ',', ' ') }}<span class="text-2xl font-normal">/5</span>
                                </p>
                                <div
                                    class="mt-4 flex items-center gap-1 text-amber-500"
                                    role="img"
                                    aria-label="{{ 'marketing.review.public.rating'|trans({'%rating%': this.averageRating|number_format(1, ',', ' ')}) }}"
                                >
                                    {% for star in 1..5 %}
                                        <svg class="h-6 w-6" viewBox="0 0 20 20" aria-hidden="true">
                                            <path
                                                d="M10 1.7l2.42 4.9 5.41.79-3.91 3.81.92 5.39L10 14.04l-4.84 2.55.92-5.39-3.91-3.81 5.41-.79L10 1.7z"
                                                fill="{{ star <= this.averageRating|round ? 'currentColor' : 'none' }}"
                                                stroke="currentColor"
                                                stroke-width="1.4"
                                                stroke-linejoin="round"
                                            />
                                        </svg>
                                    {% endfor %}
                                </div>
                                <p class="mt-3 text-sm text-gray-600">
                                    {{ 'marketing.review.public.count'|trans({'%count%': this.reviewCount}) }}
                                </p>
                            </div>

                            <div class="space-y-2">
                                {% for rating in 5..1 %}
                                    {% set ratingCount = ratingCounts[rating] ?? 0 %}
                                    {% set ratingPercentage = this.reviewCount > 0 ? (ratingCount * 100 / this.reviewCount) : 0 %}
                                    <div class="grid grid-cols-[3rem_minmax(0,1fr)_2.5rem] items-center gap-3">
                                        <span class="flex items-center gap-1 text-sm font-medium text-gray-700">
                                            {{ rating }}
                                            <svg class="h-4 w-4 text-amber-500" viewBox="0 0 20 20" aria-hidden="true">
                                                <path d="M10 1.7l2.42 4.9 5.41.79-3.91 3.81.92 5.39L10 14.04l-4.84 2.55.92-5.39-3.91-3.81 5.41-.79L10 1.7z" fill="currentColor" />
                                            </svg>
                                        </span>
                                        <span
                                            class="h-2 overflow-hidden bg-gray-200"
                                            role="img"
                                            aria-label="{{ 'marketing.review.public.rating'|trans({'%rating%': rating}) }} : {{ ratingCount }}"
                                        >
                                            <span class="block h-full bg-amber-500" style="width: {{ ratingPercentage }}%"></span>
                                        </span>
                                        <span class="text-right text-sm tabular-nums text-gray-600">{{ ratingCount }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
            <p class="mt-5 max-w-4xl text-sm leading-6 text-gray-600">
                {{ (this.moderationEnabled
                    ? 'marketing.review.public.control_enabled'
                    : 'marketing.review.public.control_disabled')|trans }}
                {{ 'marketing.review.public.chronological_sort'|trans }}
                <a
                    class="font-medium text-gray-950 underline decoration-1 decoration-gray-500 underline-offset-4 hover:decoration-gray-950"
                    data-turbo-frame="_top"
                    href="{{ path('shop_review_policy') }}"
                >
                    {{ 'marketing.review.public.policy_link'|trans }}
                </a>
            </p>
        </header>

        {% if this.reviews is empty %}
            <p class="py-10 text-gray-600">{{ 'marketing.review.public.empty'|trans }}</p>
        {% else %}
            <div class="divide-y divide-gray-200">
                {% for review in this.reviews %}
                    <article class="grid gap-6 py-8 md:grid-cols-[14rem_minmax(0,1fr)] md:gap-10">
                        <div class="md:border-r md:border-gray-200 md:pr-8">
                            <div class="flex items-center gap-3">
                                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-700" aria-hidden="true">
                                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
                                        <circle cx="12" cy="8" r="3.5" stroke="currentColor" stroke-width="1.7" />
                                        <path d="M5.5 20v-2.1c0-3.1 2.9-5.4 6.5-5.4s6.5 2.3 6.5 5.4V20h-13z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round" />
                                    </svg>
                                </span>
                                <p class="font-semibold text-gray-950">{{ review.authorDisplayName }}</p>
                            </div>
                            <p class="mt-5 text-sm leading-6 text-gray-600">
                                {{ 'marketing.review.public.published_on'|trans({
                                    '%date%': review.publishedAt|format_date('long')
                                }) }}
                                <br>
                                {{ 'marketing.review.public.purchased_on'|trans({
                                    '%date%': review.purchasedAt|format_date('long')
                                }) }}
                            </p>
                            <p class="mt-4 inline-flex items-center gap-2 text-sm font-medium text-emerald-700">
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                                    <path d="M10 2.25a4 4 0 100 8 4 4 0 000-8zM6.5 9.2L5.25 17l4.75-2 4.75 2-1.25-7.8" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
                                </svg>
                                {{ 'marketing.review.public.verified_purchase'|trans }}
                            </p>
                        </div>

                        <div>
                            <div
                                class="flex items-center gap-1 text-amber-500"
                                role="img"
                                aria-label="{{ 'marketing.review.public.rating'|trans({'%rating%': review.rating}) }}"
                            >
                                {% for star in 1..5 %}
                                    <svg class="h-6 w-6" viewBox="0 0 20 20" aria-hidden="true">
                                        <path
                                            d="M10 1.7l2.42 4.9 5.41.79-3.91 3.81.92 5.39L10 14.04l-4.84 2.55.92-5.39-3.91-3.81 5.41-.79L10 1.7z"
                                            fill="{{ star <= review.rating ? 'currentColor' : 'none' }}"
                                            stroke="currentColor"
                                            stroke-width="1.4"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                {% endfor %}
                                <span class="ml-2 text-sm font-semibold text-gray-950">{{ review.rating }}/5</span>
                            </div>
                            {% if review.title %}
                                <h3 class="mt-5 text-lg font-semibold text-gray-950">{{ review.title }}</h3>
                            {% endif %}
                            <p class="mt-4 whitespace-pre-line leading-7 text-gray-800">{{ review.comment }}</p>
                            {% if review.merchantReply %}
                                <div class="mt-6 border border-gray-200 bg-gray-50 p-5">
                                    <p class="font-semibold text-gray-950">{{ 'marketing.review.public.merchant_reply'|trans }}</p>
                                    <p class="mt-2 whitespace-pre-line leading-7 text-gray-700">{{ review.merchantReply }}</p>
                                </div>
                            {% endif %}
                            <p class="mt-6 text-sm">
                                <a
                                    class="inline-flex items-center gap-2 text-gray-600 underline decoration-gray-300 underline-offset-4 hover:text-gray-950 hover:decoration-gray-950"
                                    data-turbo-frame="_top"
                                    href="{{ path('shop_product_review_report', {id: review.id}) }}"
                                    rel="nofollow"
                                >
                                    <svg class="h-4 w-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                                        <path d="M4 17V3m0 1h9.5l-1.75 3L13.5 10H4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    {{ 'marketing.review_report.public.action'|trans }}
                                </a>
                            </p>
                        </div>
                    </article>
                {% endfor %}
            </div>
            <div class="mt-8 flex justify-center">
                {% if livePagination %}
                    {% set reviewPagination = this.reviews %}
                    {% if reviewPagination.pageCount > 1 %}
                        <nav class="flex flex-wrap items-center justify-center gap-4" aria-label="{{ 'marketing.review.public.title'|trans }}">
                            <button
                                type="button"
                                class="border border-gray-300 bg-transparent px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-950 hover:text-gray-950 disabled:cursor-not-allowed disabled:opacity-40"
                                data-action="live#action"
                                data-live-action-param="previousPage"
                                data-loading="attr(disabled)"
                                {% if reviewPagination.currentPageNumber <= 1 %}disabled{% endif %}
                            >
                                {{ 'marketing.review.public.previous_page'|trans }}
                            </button>
                            <span class="text-sm tabular-nums text-gray-600">
                                {{ 'marketing.review.public.page_status'|trans({
                                    '%current%': reviewPagination.currentPageNumber,
                                    '%total%': reviewPagination.pageCount
                                }) }}
                            </span>
                            <button
                                type="button"
                                class="border border-gray-300 bg-transparent px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-950 hover:text-gray-950 disabled:cursor-not-allowed disabled:opacity-40"
                                data-action="live#action"
                                data-live-action-param="nextPage"
                                data-loading="attr(disabled)"
                                {% if reviewPagination.currentPageNumber >= reviewPagination.pageCount %}disabled{% endif %}
                            >
                                {{ 'marketing.review.public.next_page'|trans }}
                            </button>
                        </nav>
                    {% endif %}
                {% else %}
                    {{ knp_pagination_render(this.reviews) }}
                {% endif %}
            </div>
        {% endif %}
    </section>
{% endif %}
