Sith/pedagogy/templates/pedagogy/starlist.jinja

<link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
  <fieldset
    class="star"
    x-data="{ 'value': {{ widget.value.0 }}, 'hover': -1 }"
    @mouseover.outside="hover = -1"
    {% include "django/forms/widgets/attrs.html" %}
  >
  {# Do not vote button #}
    <label
      @mouseover="hover = -1"
      for="{{ widget.optgroups.0.1.0.attrs.id }}"
    >
      <input
        type="radio"
        name="{{ widget.name }}"
        value="{{ widget.optgroups.0.1.0.value }}"
        @click="value = -1"
        {% with widget=widget.optgroups.0.1.0 %}
          {% include "django/forms/widgets/attrs.html" %}
        {% endwith %}
      >
      <i class="fa fa-times-circle"></i>
      {{ widget.optgroups.0.1.0.label }}
    </label>

  {# Star widget #}
    {% for opt in widget.optgroups|slice:"1:" %}
      <label
        @mouseover="hover = {{ opt.1.0.value }}"
        for="{{ opt.1.0.attrs.id }}"
      >
        <input
          type="radio"
          name="{{ widget.name }}"
          value="{{ opt.1.0.value }}"
          @click="value = {{ opt.1.0.value }}"
          {% with widget=opt.1.0 %}
            {% include "django/forms/widgets/attrs.html" %}
          {% endwith %}
        >
        <i
          class="{{ widget.name }} fa fa-star"
          :class="{
                  'checked': value >= {{ opt.1.0.value }},
                  'unchecked': value < {{ opt.1.0.value }},
                  'hovered': hover >= {{ opt.1.0.value }},
                  'removed': hover >= 0 && value >= {{ opt.1.0.value }} && hover < {{ opt.1.0.value }},
                  }"
        ></i>
      </label>
    {% endfor %}
  </fieldset>