{{ block title }}
    Page title
{{ endblock }}
{{ block content }}

    <!-- {{ formfields }} -->
 {{for field in form}}
    {{field.label}} : <br>
    {{for choice in field}} <!-- Inclure jQuery et jQuery UI -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- Créer les éléments de couleur pour le classement -->
{% for color in player.group.generate_color_list %}
<div class="color" data-color="{{ color }}">{{ color }}</div>
{% endfor %}

<!-- Créer la zone de classement pour les couleurs -->
<div class="color-ranking"></div>

<!-- Configurer le glisser-déposer pour le classement -->
<script>
$(function() {
  $(".color-ranking").sortable({
    stop: function(event, ui) {
      var colors = [];
      $(".color").each(function() {
        colors.push($(this).data("color"));
      });
      console.log(colors);
      // Enregistrer le classement des couleurs
      player.color_ranking = JSON.stringify(colors);
    }
  });
  $(".color-ranking").disableSelection();
});
</script>

{{endfor}}
    {{ next_button }}

{{ endblock }}