{{ block title }}Your Decision{{ endblock }}
{{ block content }}

<p>You are the <strong>Responder</strong>. The investor sent <strong>{{ amount_sent }} points</strong>,
   which has been tripled to <strong>{{ tripled_amount }} points</strong>.</p>
<p>Use the slider to choose how much to return to the investor.</p>

<div style="margin: 30px 0;">
    <input type="range" id="slider" min="0" max="{{ tripled_amount }}" value="0" step="1"
           style="width: 100%;">
    <input type="hidden" name="amount_returned" id="amount_returned" value="0">
</div>

<table class="table table-bordered w-50 text-center">
    <thead><tr><th>You Return</th><th>You Keep</th></tr></thead>
    <tbody>
        <tr>
            <td id="return-display">0</td>
            <td id="keep-display">{{ tripled_amount }}</td>
        </tr>
    </tbody>
</table>

{{ next_button }}

<script>
    const slider = document.getElementById('slider');
    const amountReturnedInput = document.getElementById('amount_returned');
    const returnDisplay = document.getElementById('return-display');
    const keepDisplay = document.getElementById('keep-display');
    const tripledAmount = parseInt(document.getElementById('slider').max);

    slider.addEventListener('input', function () {
        const returned = parseInt(this.value);
        amountReturnedInput.value = returned;
        returnDisplay.textContent = returned;
        keepDisplay.textContent = tripledAmount - returned;
    });
</script>

{{ endblock }}