{% extends "qommon/forms/widget.html" %}
{% load qommon %}
{% block widget-control %}
<select style="display: none;" id="form_{{widget.name}}" name="{{widget.name}}"
    {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}>
  <option value="">---</option>
  {% for option in widget.get_options %}
    <option data-index="{{ forloop.counter }}" {% for attr in option.attrs.items %} {{attr.0}}="{{attr.1}}"{% endfor %}
      >{{ option.description }}</option>
  {% endfor %}
</select>
<div class="star-choice">
{% for option in widget.get_options %}
  <span class="star" data-index="{{ forloop.counter }}"></span>
{% endfor %}
</div>
<script>
$(function() {
  $('#form_{{widget.name}}').parent().find('.star-choice span').on('click', function() {
    if ($(this).hasClass('selected')) {
      $(this).nextAll().removeClass('selected');
    } else {
      $(this).prevAll().addClass('selected');
      $(this).addClass('selected');
      $(this).nextAll().removeClass('selected');
    }
    $('#form_{{widget.name}} option[data-index=' + $(this).data('index') + ']').prop('selected', true);
  });
  $('#form_{{widget.name}}').parent().find('.star-choice [data-index=' + $('#form_{{widget.name}} option:selected').data('index') + ']').trigger('click');
});
</script>
{% endblock %}
