{{ extends "global/Page.html" }}
{{ block title }}Partner 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 partner's</strong> preferred order, based on your understanding of their tastes. Start with the item you believe your partner likes the most, placing it at the top of the list (ranked as 1), and proceed to rank each item in descending order of preference until the item you believe they 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>

<p>
    <b>You can earn money from this task.</b> Your partner will also rank these items for themselves. If you can correctly guess your partner's rankings, you earn ${{ session.config.belief_payout }}. Specifically, we will compare your guess of your partner's preferences to your partner's actual ranking. If you have accurately guessed the numerical ranking of least {{ session.config.match_requirement }} of these items, you will earn ${{ session.config.belief_payout }}.
</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('partner_ranking').value = order.join(',');
            console.log("Updated Ranking: " + document.getElementById('partner_ranking').value);
        }
    });
</script>

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

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

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

{{ endblock }}