{% if this.enabled %}
    <section {{ attributes.defaults({ id: 'product-reviews', class: 'theme-reviews' }) }}>
        <header class="theme-reviews__header">
            <h2>{{ 'marketing.review.public.title'|trans }}</h2>

            {% if this.averageRating is not null %}
                {% set ratingCounts = this.ratingCounts %}
                <div class="theme-reviews__summary">
                    <div class="theme-reviews__average">
                        <p class="theme-reviews__average-value">
                            {{ this.averageRating|number_format(1, ',', ' ') }}<span>/5</span>
                        </p>
                        <div
                            class="theme-reviews__stars"
                            role="img"
                            aria-label="{{ 'marketing.review.public.rating'|trans({'%rating%': this.averageRating|number_format(1, ',', ' ')}) }}"
                        >
                            {% for star in 1..5 %}
                                <svg 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>{{ 'marketing.review.public.count'|trans({'%count%': this.reviewCount}) }}</p>
                    </div>

                    <div class="theme-reviews__distribution">
                        {% for rating in 5..1 %}
                            {% set ratingCount = ratingCounts[rating] ?? 0 %}
                            {% set ratingPercentage = this.reviewCount > 0 ? (ratingCount * 100 / this.reviewCount) : 0 %}
                            <div class="theme-reviews__distribution-row">
                                <span class="theme-reviews__distribution-label">
                                    {{ rating }}
                                    <svg 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="theme-reviews__distribution-track"
                                    role="img"
                                    aria-label="{{ 'marketing.review.public.rating'|trans({'%rating%': rating}) }} : {{ ratingCount }}"
                                >
                                    <span style="width: {{ ratingPercentage }}%"></span>
                                </span>
                                <span class="theme-reviews__distribution-count">{{ ratingCount }}</span>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            <p class="theme-reviews__policy">
                {{ (this.moderationEnabled ? 'marketing.review.public.control_enabled' : 'marketing.review.public.control_disabled')|trans }}
                {{ 'marketing.review.public.chronological_sort'|trans }}
                <a 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="theme-reviews__empty">{{ 'marketing.review.public.empty'|trans }}</p>
        {% else %}
            <div class="theme-reviews__list">
                {% for review in this.reviews %}
                    <article class="theme-review">
                        <aside class="theme-review__identity">
                            <div class="theme-review__author">
                                <span class="theme-review__avatar" aria-hidden="true">
                                    <svg 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>
                                <strong>{{ review.authorDisplayName }}</strong>
                            </div>
                            <p class="theme-review__dates">
                                {{ '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="theme-review__verified">
                                <svg 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>
                        </aside>

                        <div class="theme-review__content">
                            <div
                                class="theme-reviews__stars theme-reviews__stars--small"
                                role="img"
                                aria-label="{{ 'marketing.review.public.rating'|trans({'%rating%': review.rating}) }}"
                            >
                                {% for star in 1..5 %}
                                    <svg 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 %}
                                <strong>{{ review.rating }}/5</strong>
                            </div>
                            {% if review.title %}<h3>{{ review.title }}</h3>{% endif %}
                            <p class="theme-review__comment whitespace-pre-line">{{ review.comment }}</p>

                            {% if review.merchantReply %}
                                <div class="theme-review__reply">
                                    <strong>{{ 'marketing.review.public.merchant_reply'|trans }}</strong>
                                    <p class="whitespace-pre-line">{{ review.merchantReply }}</p>
                                </div>
                            {% endif %}

                            <p class="theme-review__report">
                                <a
                                    data-turbo-frame="_top"
                                    href="{{ path('shop_product_review_report', { id: review.id }) }}"
                                    rel="nofollow"
                                >
                                    {{ 'marketing.review_report.public.action'|trans }}
                                </a>
                            </p>
                        </div>
                    </article>
                {% endfor %}
            </div>

            {% if livePagination %}
                {% set reviewPagination = this.reviews %}
                {% if reviewPagination.pageCount > 1 %}
                    <nav class="theme-reviews__pagination" aria-label="{{ 'marketing.review.public.title'|trans }}">
                        <button
                            type="button"
                            class="theme-button-stroke"
                            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>{{ 'marketing.review.public.page_status'|trans({
                            '%current%': reviewPagination.currentPageNumber,
                            '%total%': reviewPagination.pageCount
                        }) }}</span>
                        <button
                            type="button"
                            class="theme-button-stroke"
                            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 %}
                <div class="theme-reviews__pagination">{{ knp_pagination_render(this.reviews) }}</div>
            {% endif %}
        {% endif %}
    </section>
{% endif %}
