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

{% block title %}
Individual Valuation - Trial {{ round_number }}
{% endblock %}

{% block content %}
<h1>Individual Valuation - Trial {{ round_number }}</h1>
<p>Please rate the value and your confidence for each fruit below.</p>
<form method="post">
    <div>
        <svg width="40" height="40" style="vertical-align: middle;">
            <polygon points="20,5 5,35 35,35" fill="{{ option1_color }}" />
        </svg><br>

        <label>How valuable is this object?</label><br>
        <input type="range" name="option1_value_ind" min="0" max="100" step="1" value="50">
        <span id="option1_value_ind_display">50</span><br>

        <label>How confident are you?</label><br>
        <input type="range" name="option1_confidence_ind" min="0" max="100" step="1" value="50">
        <span id="option1_confidence_ind_display">50</span>
    </div>

    <br>

    <div>
        <svg width="40" height="40" style="vertical-align: middle;">
            <polygon points="20,5 5,35 35,35" fill="{{ option2_color }}" />
        </svg><br>

        <label>How valuable is this object?</label><br>
        <input type="range" name="option2_value_ind" min="0" max="100" step="1" value="50">
        <span id="option2_value_ind_display">50</span><br>

        <label>How confident are you?</label><br>
        <input type="range" name="option2_confidence_ind" min="0" max="100" step="1" value="50">
        <span id="option2_confidence_ind_display">50</span>
    </div>

    <br>
    <button type="submit">Submit</button>
</form>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Update the display of slider values.
    document.querySelectorAll('input[type="range"]').forEach(function(slider) {
        slider.addEventListener('input', function() {
            const display = document.getElementById(slider.name + "_display");
            if (display) {
                display.innerText = slider.value;
            }
        });
    });
});
</script>
{% endblock %}