{% with id=widget.attrs.id %}<ul id="{% if id %}{{ id }}{% else %}star_rating{% endif %}" class="star-list {{ widget.color }}-text tooltipped" data-tooltip="{{ widget.ranking }}" data-position="top" data-ranking="{{ widget.ranking }}" data-color="{{ widget.color }}">
{% if widget.optgroups %}{% for group, options, index in widget.optgroups %}{% if group %}
  <li class="star-list-item">{{ group }}<ul{% if id %} id="{{ id }}_{{ index }}"{% endif %}>{% endif %}{% for option in options %}
    <li class="star-list-item">{% include option.template_name with widget=option %}</li>{% endfor %}{% if group %}
  </ul></li>{% endif %}{% endfor %}
{% else %}
{% for star_class in widget.stars %}
    <li style="display: inline;"><i class="material-icons {{ star_class }}"></i></li>{% endfor %}
{% endif %}
</ul>
{% if widget.optgroups %}
<script>
    $("#{% if id %}{{ id }}{% else %}star_rating{% endif %}").hover(function(){
        // Change star color
        $(this).removeClass($(this).data("color")+"-text");
        $(this).addClass("{{ widget.select_color }}-text");
        var th = jQuery(".star-item-label", this);
        th.removeClass($(this).data("color")+"-text");
        th.addClass("{{ widget.select_color }}-text");

        set_star_radio_classes(this);

    }, function(){
        // Reset star color
        $(this).removeClass("{{ widget.select_color }}-text");
        $(this).addClass($(this).data("color")+"-text");
        var th = jQuery(".star-item-label", this);
        th.removeClass("{{ widget.select_color }}-text");
        th.addClass($(this).data("color")+"-text");

        set_star_ranking_classes(this);
    });
</script>
{% endif %}{% endwith %}
