{{ block title }}Your Decision{{ endblock }}
{{ block content }}
    <p>
        You are <strong>Participant 1</strong>.
        Please decide how much of the {{ C.ENDOWMENT }}
        you will share with <strong>Participant 2</strong>.
    </p>

<p>Move the slider to decide how much to give.</p>

<div style="display: flex">
<input type="range" name="shared" min="0" max="{{ C.ENDOWMENT }}" style="flex: 0.5" oninput="updateDescription(this)">
<p id="description"></p>
</div>
<!-- by leaving the description blank initially, we prompt the user to move the slider,
reducing the anchoring/default effect. -->

<script>
    let description = document.getElementById('description');
    function updateDescription(input) {
        let give = parseInt(input.value);
        let keep = js_vars.endowment - give;
        description.innerText = ` Give ${give} points and keep ${keep} for yourself.`
    }
</script>

    {{ next_button }}

    {{ include C.INSTRUCTIONS_TEMPLATE }}

{{ endblock }}