{% import "@SyliusShop/Common/Macro/icons.html.twig" as icons %}

{% set additional_classes = ' cursor-pointer ' ~ class|default('') %}

<div data-js-rating
     data-js-rating-max="5"
     data-js-rating-average="{{ average }}"
     data-js-rating-viewonly="{{ viewonly }}"
     {{ sylius_test_html_attribute('average-rating', average) }}>

    {# étoile « on » = remplie #}
    <div data-js-rating-btn-on>
        <small>
            <i class="bi bi-star-fill text-star {{ additional_classes }}"></i>
        </small>
    </div>

    {# étoile « off » = vide / grisée #}
    <div data-js-rating-btn-off>
        <small>
            <i class="bi bi-star text-muted {{ additional_classes }}"></i>
        </small>
    </div>
</div>