{{ block title }}
Allocation Choice
{{ endblock }}
{{ block content }}
<style>
    .otree-title {
        background: #EEF5FF;
        font-size: 40px;
        text-align: center;
        padding: 5% 0% 2% 0%;
    }
    .otree-body {
        max-width:1600px
    }
    .otree-btn-next {
        float: right;
        margin-right: 1%;
    }
    p,a,span {
        font-size: 20px;
    }
</style>
    <p>
  In this next scenario, you have been paired with another participant. You have been given 100LD
  to allocate between yourself and the other participant. This is an anonymous one-time
  interaction, and you will not interact with this participant again.
    </p>
    <p>Select on the slider below how much you would like to allocate to the other participant:</p>
    <br>
    <input type='hidden' name='dictator_choice' id='dictator_choice' value=0 />
    <a style="margin-left:4%">0</a>
    <input style="margin-left:1%; margin-right:1%; width:50%" type="range" id="dictator_choice_visible" min="0" max="100" value="0" class="slider" oninput="update(this)">
    <label><span id="dictator_choice_visible_label"> Make a selection </span></label> <br>
    <br>
    {{ formfield_errors "dictator_choice" }}

    <p id="confirmation"> </p>

    <p> Click 'Next' if you are happy with this choice and wish to proceed. </p>

    <script>
        function update(input) {
            let value = parseInt(input.value) + ' LD';
            document.getElementById('dictator_choice').value = parseInt(input.value);
            document.getElementById('dictator_choice_visible_label').innerHTML = value;
            let other = 100-parseInt(input.value);
            document.getElementById('confirmation').innerHTML = "You have selected to give <b>" + value + "</b> to the other participant and keep <b>" + other + " LD</b> for yourself";
           }
    </script>

    {{ next_button }}

{{ endblock }}