{{ extends "global/Page.html" }}
{{ block title }}Personal Product Ranking{{ endblock }}

{{ block content }}


<!-- Updates html style to match other UW Teton Lab experiments -->
{{ include_sibling 'uw_teton_bg.html' }}

<!-- Introduction paragraph explaining the task to the user -->
<p>
    Please arrange the items in the list by dragging them into <strong>your own</strong> preferred order. Start with the item you like the most, placing it at the top of the list (ranked as 1), and proceed to rank each item in descending order of your own preference until the item you like the least, which should be placed at the bottom (ranked as 10). All items are of equal market value and are priced at approximately $30.
</p>

<!-- Two-column list where items will be dynamically populated and can be reordered by the user -->
<div style="max-width: 100%; overflow-x: hidden; height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center;">
    <!-- List where items will be dynamically populated and can be reordered by the user -->
    <ul id="items" class="list-group list-group-numbered" style="cursor: move; width: 100%; overflow-y: auto; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;">
        {% for item in image_paths %}
        <!-- List item containing an image and a description; 'data-id' stores the unique identifier for each item -->
        <li data-id="{{ item.id }}" class="list-group-item" style="display: flex; align-items: center; justify-content: flex-start; width: 49%; margin: 5px 0.5%; box-sizing: border-box; height: 13vh; overflow: hidden;">
            <img src="{{ item.url }}" style="width: 100px; height: auto; margin-right: 10px;"> <!-- Width fixed, height auto -->
            <span>{{ item.description }}</span> <!-- Text description next to the image -->
        </li>
        {% endfor %}
    </ul>
</div>

<!-- Including the SortableJS library to make the list sortable via drag and drop -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    let el = document.getElementById('items');

    let sortable = Sortable.create(el, {
        animation: 150,  // Animation speed when sorting, in milliseconds
        ghostClass: 'sortable-ghost',  // Class name for the drop placeholder
        handle: ".list-group-item",  // Restricts the drag start to the list-group-item elements
        onEnd: function () {
            let order = sortable.toArray();
            document.getElementById('ranking').value = order.join(',');
            console.log("Updated Ranking: " + document.getElementById('ranking').value);
        }
    });
</script>

<!-- Hidden input field to store the order of items as a comma-separated string -->
<input type="hidden" name="ranking" id="ranking">

<!-- Display any form field errors -->
{{ formfield_errors 'ranking' }}

<!-- Button to submit the form and proceed to the next page -->
{{ next_button }}

{{ endblock }}