{% extends "layouts/election_layout.html" %}

{% block header %}
<title>Cryptovote | Vote</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/sortable.css') }}">
{% endblock %}

{% block content %}
<section class="portfolio-block contact">
    <div class="container">
        <div class="heading">
            <h1>Ballot</h1>
        </div>
        <form id="ballot-form" action="{{ url_for('vote.vote', election=election.name) }}" method="post" onsubmit="return submitForm()">
            <input type="hidden" name="key_s" value="{{ public_key.s }}">
            <input type="hidden" name="key_n" value="{{ public_key.n }}">

            <div class="form-group">

              <ul id="sortable_nav" class="sortable ui-sortable" >
                {% for candidate in candidates %}
                  <li class="ui-state-default" data-candidate="{{ candidate.name }}">
                      {{ candidate.name }}
                      <div class="ui-state-default sortable-number">
                          {{ loop.index }}
                      </div>
                  </li>
                {% endfor %}
              </ul>

            </div>
            <input type="hidden" id="ballot" name="ballot"/>
            <div class="form-group" style="margin-top: 50px;">
              <button type="submit" class="btn btn-primary btn-block btn-lg" style="background-color: #0084da;">Submit Ballot</button>
            </div>
        </form>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ url_for('static', filename='js/encrypt-ballot.js') }}"></script>
<script type="text/javascript">
  $("#sortable_nav").sortable({
      placeholder: "ui-state-highlight",
      helper: 'clone',
      create: function(e, ui) {
          var ballot = $(this).sortable("toArray", {
            attribute: "data-candidate"
          });
          $("#ballot").val(ballot)
      },
      stop: function(e, ui) {
          var ballot = $(this).sortable("toArray", {
            attribute: "data-candidate"
          });
          $("#ballot").val(ballot)
      },
      sort: function(e, ui) {
          $(ui.placeholder).html(Number($("#sortable_nav > li:visible").index(ui.placeholder)) + 1);
      },
      update: function(event, ui) {
          var $lis = $(this).children('li');
          $lis.each(function() {
              var $li = $(this);
              var newVal = $(this).index() + 1;
              $(this).children('.sortable-number').html(newVal);
              $(this).children('#item_display_order').val(newVal);
          });
      }
  });
  $("#sortable_nav").disableSelection();
</script>
{% endblock %}