{% with id=widget.attrs.id %}
<div{% if id %} id="{{ id }}" {% endif %}{% if widget.attrs.class %}
    class="{{ widget.attrs.class }} boost-star-evaluation"{% else %} class="boost-star-evaluation" {% endif %}>
    {% for group, options, index in widget.optgroups %}
        {% if group %}
            <li>{{ group }}<ul{% if id %} id="{{ id }}_{{ index }}" {% endif %}>
        {% endif %}
        {% for option in options %}
            {% include option.template_name with widget=option %}
        {% endfor %}
        {% if group %}
            </ul>
            </li>
        {% endif %}
    {% endfor %}
</div>
{% endwith %}
<style>
.boost-star-evaluation{
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.boost-star-evaluation input[type='radio']{
display: none;
}
.boost-star-evaluation label{
position: relative;
padding: 10px 10px 0;
color: gray;
cursor: pointer;
font-size: 2rem;
}
.boost-star-evaluation label .text{
position: absolute;
left: 0;
top: 0;
right: 0;
text-align: center;
font-size: 1rem;
color: gray;
}
.boost-star-evaluation label:hover,
.boost-star-evaluation label:hover ~ label,
.boost-star-evaluation input[type='radio']:checked ~ label{
color: #ffcc00;
}
</style>
