{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
    <link href="{% static 'css/custom.css' %}" rel="stylesheet"/>
{% endblock %}

{% block title %}
    Ranking of principles
{% endblock %}

{% block content %}
    <div class="wrapper textbox">
        <p>
            Please rank the principles.
        </p>
    </div>

    <div class="wrapper textbox">
        <ul id="items" class="list-group list-group-numbered" style="cursor: move">
            <li data-id="A" class="list-group-item">{{ p1 }}</li>
            <li data-id="B" class="list-group-item">{{ p2 }}</li>
            <li data-id="C" class="list-group-item">{{ p3 }}</li>
            <li data-id="D" class="list-group-item">{{ p4 }}</li>
            <li data-id="E" class="list-group-item">{{ p5 }}</li>
        </ul>
    </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) {
                forminputs.ranking.value = sortable.toArray().join(',');
            }
        });
    </script>

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

    {{ form.ranking.errors }}

    <p>
        <button class="otree-btn-next btn btn-primary">Submit ranking</button>
    </p>


{% endblock %}