{% load otree static %}

{{ block title }}
Ranking
{{ endblock }}
{{ block content }}

<style type="text/css">
table.PerformanceTable {
    table-layout: fixed;
    width: 500px;
}

table.PerformanceTable td.PerformanceCell {
        width: 75px;
}

td {
width: 125px;
}

table td
{
border-collapse: collapse;
padding: 10px;
border: 1px solid white;
vertical-align: center;
empty-cells: hide;
}

.none_but_top {
border-bottom: hidden;
border-left: hidden;
border-right: hidden;
}

}

</style>

<p>In this task, we ask you to rank the following items in your order of preference. The first one in the ranking is the
    one you would most like to have, and the last, the one you like the least.</p>

<p>If this question is randomly chosen for payment, two of the objects will be selected (also at random). You will
    receive the object, out of the two, that you ranked highest as your additional payment. Because of this payment
    system, it is in your best interest to think carefully about how you rank the objects.</p>

<p>Below you can read about the features of each object.</p>


<p>
    <table>
<thead>
</thead>
   {{ for object in objects_ordered }}
    <tr>
        <td style="text-align:center;"><strong>{{object.name}}</strong></td>
        <td colspan="1"><img src="{{ static object.img }}" alt="picture of (a) {{object.name}}" style="width:150px;"></td>
        <td colspan="2">
            <ul>
                <li>{{object.info1}}</li>
                <li>{{object.info2}}</li>
                <li>{{object.info3}}</li>
            </ul>
        </td>
    </tr>
    {{ endfor }}
    <tr>
        <td class="none_but_top"></td>
        <td class="none_but_top"></td>
        <td class="none_but_top"></td>
        <td class="none_but_top"></td>
    </tr>
</table>
</p>



<p>Please, drag and drop the following items to rank them according to your preference. Remember, the first one in the
    ranking is the one you would most like to have, and the last, the one you like the least.</p>

<ul id="items" class="list-group list-group-numbered" style="cursor: move">
    {{ for choice in objects_ordered_names }}
    <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>
    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><br>
    {{ next_button }}
</p>

{{ endblock }}