{{ block title }}
SVO task: Decision {{ subsession.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}

{{ block content }}

<style>
.otree-timer {
    display: none;
}
</style>

<script>

    setTimeout(function() {
            const nextButton = document.getElementById('next-button');
            nextButton.removeAttribute('disabled');
        }, 4000); // 4 seconds

</script>

    <h5>
            Choose a distribution between yourself
            and the other player.

    </h5>

<div class="input-group">
    <input type="range" name="choice" min="0" max="8" class="form-range" oninput="sliderMoved(this)">
</div>

<div id="graph"></div> <!-- Add a div to display the graph -->

<div class="input-group">
    <span class="input-group-text">
        <h5>
            You Receive:
        <span id="to_self_value">85</span></span>
        </h5>
</div>

<div class="input-group">
    <span class="input-group-text">
        <h5>
            Other Receives:
        <span id="to_other_value">85</span></span>
        </h5>
</div>

{{ include_sibling 'chart.html' }}

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Set the initial values for the slider labels
        let initialIdx = parseInt(document.querySelector('input[name="choice"]').value);
        let initialRow = js_vars.rows[initialIdx];
        document.getElementById('to_self_value').textContent = initialRow.to_self;
        document.getElementById('to_other_value').textContent = initialRow.to_other;

        // Load the initial data for the graph
        redrawChart(initialRow.to_self, initialRow.to_other);
    });

    function sliderMoved(input) {
        let idx = parseInt(input.value);
        let row = js_vars.rows[idx];

        // Update the slider labels dynamically when the slider moves
        document.getElementById('to_self_value').textContent = row.to_self;
        document.getElementById('to_other_value').textContent = row.to_other;

        // Update the chart with the new data
        redrawChart(row.to_self, row.to_other);
    }
</script>

<button id="next-button" disabled="disabled">Next</button> <!-- Disable the Next button by default -->

{{ include_sibling 'instructions.html' }}

{{ endblock }}