{% load wagtailcore_tags core_tags gem_tags %}
<form id="polls_form" action="{% pageurl form_page %}" method="post" class="polls__form" novalidate="novalidate">
{% csrf_token %}
  {{ form.media }}
  {% for field in form %}
    {% if field|fieldtype == 'RadioSelect' %}
      <fieldset class="choice-fieldset">
        {% for value, text in field.field.choices %}
          <div class="choice-group choice-group__radio">
            {% if user_has_chosen %}
              <input name="{{ field.name }}"
              id="value-{{ field.id_for_label }}-{{ forloop.counter }}"
              type="radio" value="{{ value }}" checked="checked"
              onclick="set_form_choice('{{form_page.slug}}')"/>
            {% else%}
              <input name="{{ field.name }}"
              id="value-{{ field.id_for_label }}-{{ forloop.counter }}"
              type="radio" value="{{ value }}"
              onclick="set_form_choice('{{form_page.slug}}')"/>
            {% endif %}
              <label class="choice-label" for="value-{{ field.id_for_label }}-{{ forloop.counter }}">
                {{ text|capfirst }}
              </label>
          </div>
        {% endfor %}
      </fieldset>

      <div class="responses">
        <div class="response-percent">
          {% for value, text in field.field.choices %}
            <span id="{{ value }}-perc" class="response-percent__bar">
            </span>
          {% endfor %}
        </div>
      </div>

    {% endif %}

    {% if field.errors %}
      <ul class="error-list">
      {% for error in field.errors %}
        <li class="error-list__item">{{ error }}</li>
      {% endfor %}
      </ul>
    {% endif %}
  {% endfor %}
  <input class="article_page" type="hidden" name="article_page"  value="{{ self.pk }}" />
</form>

<script type="text/javascript">
  function set_form_choice(slug){
    var frm = $('#polls_form'),
      label = $(event.target),
      $thisElem = label.next()[0];

    $('.choice-label').removeClass('active');
    $($thisElem).addClass('active');
    sessionStorage.setItem('rq',$($thisElem).attr('for'));

    $.ajax({
      type: frm.attr('method'),
      url: frm.attr('action'),
      data: frm.serialize() + '&ajax=True',
      success: function(data) {
        update_ui(data);
      },
    });
  };
  $('label[for='+ sessionStorage.getItem('rq') +']').addClass('active');

  function update_percentages(slug, article_id){
    $.ajax({
      type: "get",
      url: article_id ? "/forms/"+ slug +"/" + article_id +"/success/?format=json":"/forms/"+ slug +"/success/?format=json",
      success: function (data) {
        update_ui(data);
      }
    });
  }
  function update_ui(data){
    for (form in data) {
      if(form!=='article_page'){
        var responses = data[form];
        var updated = [];
        for (choice in responses) {
          var percent = responses[choice];
          $('#'+choice+'-perc').text(percent).css('width',percent+'%');
          updated.push(choice+'-perc');
        }
        $('.response-percent__bar').each(function(){
          if ($.inArray(this.id, updated) == -1){
            $(this).text(0).css('width','0%');
          }
        })
      }
    }
  }
  update_percentages('{{form_page.slug}}', {{self.pk }});
</script>