{% extends "qommon/forms/widget.html" %}
{% load qommon %}

{% block widget-css-classes %}{{ block.super }} widget-inline-radio{% endblock %}

{% block widget-control %}

{% for option in widget.get_options %}
<label class="star-choice"
   title="{{ option.label }}"
   {% if option.disabled %}class="disabled"{% endif %}><input
   {% if option.selected %}checked="checked"
   {% elif widget.readonly or option.disabled %}disabled="disabled"{% endif %}
   {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}
   type="radio" name="{{ widget.name }}"
   value="{{ option.value }}"><span class="star" aria-hidden="true"></span><span class="star-label">{{ option.label }}</span></label>
   {% if not forloop.last %}{{ widget.delim|safe }}{% endif %}
{% endfor %}

<script>
$(function() {
  var $widget = $('#form_label_{{widget.name}}').parents('div.widget');
  $widget.find('.star-choice input').on('change', function() {
    if ($(this).is(':checked')) {
      $(this).parent().nextAll().find('.star').removeClass('selected');
      $(this).parent().prevAll().find('.star').addClass('selected');
      $(this).next().addClass('selected');
    }
  });
  $widget.find('input:checked').trigger('change');
});
</script>

{% endblock %}
