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

<p>You are the <strong>Investor</strong>. You have <strong>{{ C.ENDOWMENT }} points</strong> to invest.</p>
<p>Use the slider to choose how much to send. The amount will be tripled before the responder receives it.</p>

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

<table class="table table-bordered w-50 text-center">
    <thead><tr><th>You Send</th></tr></thead>
    <tbody>
        <tr>
            <td id="send-display">0</td>
            <td id="keep-display">{{ C.ENDOWMENT }}</td>
            <td id="tripled-display">0</td>
        </tr>
    </tbody>
</table>

{{ next_button }}

<script>
    const slider = document.getElementById('slider');
    const amountSentInput = document.getElementById('amount_sent');
    const sendDisplay = document.getElementById('send-display');
    const keepDisplay = document.getElementById('keep-display');
    const tripledDisplay = document.getElementById('tripled-display');
    const endowment = js_vars.endowment;

    slider.addEventListener('input', function () {
        const sent = parseInt(this.value);
        amountSentInput.value = sent;
        sendDisplay.textContent = sent;
        keepDisplay.textContent = endowment - sent;
        tripledDisplay.textContent = sent * 3;
    });
</script>

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

<p>You are the <strong>Investor</strong>. You have <strong>{{ C.ENDOWMENT }} points</strong> to invest.</p>
<p>Use the slider to choose how much to send. The amount will be tripled before the responder receives it.</p>

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

<table class="table table-bordered w-50 text-center">
    <thead><tr><th>You Send</th></tr></thead>
    <tbody>
        <tr>
            <td id="send-display">0</td>
        </tr>
    </tbody>
</table>

{{ next_button }}

<script>
    const slider = document.getElementById('slider');
    const amountSentInput = document.getElementById('amount_sent');
    const sendDisplay = document.getElementById('send-display');

    slider.addEventListener('input', function () {
        const sent = parseInt(this.value);
        amountSentInput.value = sent;
        sendDisplay.textContent = sent;
    });
</script>

{{ endblock }}