{{ block title }}
Terminfindung Anschlussexperiment
{{ endblock }}
{{ block content }}

Bitte geben Sie Ihre Präferenzen bzgl. des Termins für die zweite Sitzung des Experiments an. Beachten Sie, dass Sie für die Teilnahme an der zweiten Sitzung eingeplant worden sind.
<br><br> Gehen Sie mit der Maus auf eine Termin-Zeile und bewegen Sie diese nach oben/unten um die Reihenfolge der Termine nach Ihren Präferenzen zu ändern. <br><br>


<ul id="items" class="list-group list-group-numbered" style="cursor: move">
    {{ for choice in C.CHOICES }}
    <li data-id="{{ choice }}" class="list-group-item">{{ choice }}</li>
    {{ endfor }}
</ul>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    $('#finish').hide();
    let el = document.getElementById('items');
    let sortable = Sortable.create(el, {
        onChange: function (evt) {
            document.getElementById('termine').value = sortable.toArray().join(',');
        }
    });
    function showNextStep() {
  document.getElementById("step1").style.display = "none";
  document.getElementById("step2").style.display = "block";
  alert("Klicken Sie auf OK, um Ihre Auswahl zu bestätigen!");

}

function showFinish() {
  // code to show finish button
}

</script>


{{ formfield_errors 'termine' }}
<br><br>
<div id="step1">
  <!-- Step 1 content -->
  <button onclick="showNextStep()" type="button" class="btn btn-primary">Terminauswahl bestätigen</button>
</div>

<div id="step2" style="display:none;">
  <!-- Step 2 content -->
  <button onclick="showFinish()" class="btn btn-primary">Beenden</button>
</div>
<!--<p>-->
<!--    <button type="button" id="alert" class="btn btn-primary" onclick="myFunction()"> Lock</button>-->

<!--    <button type="Submit" id="finish" class="btn btn-primary" onclick="myFunction()"> Finish</button>-->

<!--</p>-->

{{ endblock }}