<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_extension_ratings_summary %}
<div class="sw-extension-ratings-summary">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_extension_ratings_summary_grid %}
    <div class="sw-extension-ratings-summary__grid">
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_extension_ratings_summary_grid_average_rating %}
        <h3 class="sw-extension-ratings-summary__average">
            {{ summary.averageRating }}
        </h3>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_extension_ratings_summary_grid_label %}
        <p>
            {{ $tc('sw-extension-store.component.sw-extension-ratings.sw-extension-ratings-summary.labelRating', summary.numberOfRatings, { numberOfRatings: summary.numberOfRatings }) }}
        </p>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_extension_ratings_summary_grid_rating_rows %}
        <div class="sw-extension-ratings-summary__rows">
            <template
                v-for="ratingGroup in summary.ratingAssignment"
                :key="ratingGroup.rating"
            >
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_extension_ratings_summary_grid_rating_rows_content %}
                <sw-extension-rating-stars
                    :rating="Number(ratingGroup.rating)"
                    :size="12"
                />
                {% endblock %}
            </template>
        </div>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_extension_ratings_summary_grid_rating_progress_bars %}
        <div class="sw-extension-ratings-summary__progress-bars">
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_extension_ratings_summary_grid_rating_progress_bars_count_rows %}
            <div class="sw-extension-ratings-summary__rows">
                <template
                    v-for="ratingGroup in summary.ratingAssignment"
                    :key="ratingGroup.rating"
                >
                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_extension_ratings_summary_grid_rating_progress_bars_count_rows_count %}
                    <span>
                        {{ ratingGroup.count }}
                    </span>
                    {% endblock %}
                </template>
            </div>
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_extension_ratings_summary_grid_rating_progress_bars_progress_bar_rows %}
            <div class="sw-extension-ratings-summary__rows">
                <template
                    v-for="ratingGroup in summary.ratingAssignment"
                    :key="ratingGroup.rating"
                >
                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_extension_ratings_summary_grid_rating_progress_bars_progress_bar_rows_progress_bar %}
                    <sw-progress-bar
                        :value="ratingGroup.count"
                        :max-value="maxProgressValue"
                    />
                    {% endblock %}
                </template>
            </div>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
