{{ block title }}
Stage 1: Ranking Payoff Pairs
{{ endblock }}
{{ block content }}



<p>Rank the payoff pairs by moving them to their ranks (rank 1 = best, ..., rank 16 = worst).<p>

<style>

.overallContainer {
    width: 55%;
    height:820px;
   padding: 10px;
    background-color: lightgray;
    border: 2px solid black;
}



.itemContainer {
  width: 370px;
  height: 700px;
    display: inline-block;
    font-size: 20px;
}

.itemContainer h3 {
  background-color: #abd5ea;
  color: #333;
  font-size: 20px;
  line-height: 30px;
  margin: 0;
  padding-left: 10px;
}

.rankContainer {
    width: 120px;
    float: left;
    display: inline-block;
    font-size: 20px;
}

.rankContainer h3 {
  background-color: #abd5ea;
  color: #333;
  font-size: 20px;
  line-height: 30px;
  margin: 0;
  padding-left: 10px;
}
</style>


<div class="overallContainer">

        <div class="rankContainer">
        <h3>Rank</h3>
    {{ for r in Constants.ranks }}
    <li data-id="{{ r}}" class="list-group-item">{{ r }}</li>
    {{ endfor }}
                </ul>
    </div>

  <div class="itemContainer">
      <h3>Tuple</h3>
    <ul id="items" class="list-group" style="cursor: move">
    {{ for choice in Constants.choices }}
    <li data-id="{{ choice }}" class="list-group-item">{{ choice }}</li>
    {{ endfor }}
    </ul>
  </div>




</div>


<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    let el = document.getElementById('items');
    let sortable = Sortable.create(el, {
        onChange: function (evt) {
            document.getElementById('ranking').value = sortable.toArray().join(',');
        }
    });
</script>

<input type="hidden" name="ranking" id="ranking">

{{ formfield_errors 'ranking' }}

<p>
    {{ next_button }}

</p>

{{ endblock }}