{{ extends "global/Page.html" }}

{{ block title }}
Allocation Decision
{{ endblock }}

{{ block content }}
<p>We now ask you to make another splitting decision, which will not affect your own payoffs.
    You have to divide the earnings between two other participants who performed the {{ task_name }} task. We show you below
    some
    information about these two participants. One in six times, your choice here will determine the actual payoff of a participant below.
    Please use the bar to indicate your decision.</p>
<div class="row">
    <div class="col">
        {{ include 'PartnerCard.html' with label='Receiver 1' && person=receiver1 && show_reward=True && select=False }}
    </div>
    <div class="col">
        {{ include 'PartnerCard.html' with label='Receiver 2' && person=receiver2 && show_reward=True && select=False }}
    </div>
</div>
<div class="my-5 text-center">
    {{ formfield_errors 'receivers_allocation' }}
    {{ include 'AllocationSlider.html' with account=account && label_left=receiver1.name &&
    label_right=receiver2.name }}
</div>

<input type="hidden" name="receivers_allocation" id="receivers_allocation_id">


{{ next_button }}

{{ endblock }}

{{ block scripts }}
<script>
    var mySlider = document.getElementById("my-slider");
    var amountInput = document.getElementById('receivers_allocation_id');

    var myOutput = document.getElementById("my-amount");
    var accPartnerOutput = document.getElementById("acc-partner-amount");

    window.onload = () => {
        // Update the current slider value (each time you drag the slider handle)
        mySlider.onmouseup = function () {
            mySlider.classList.remove('hidden-thumb');
            mySlider.classList.add('active-thumb');
            let amount = parseFloat(this.value);
            let allocReceiver1 = (mySlider.max - amount).toFixed(2);
            myOutput.innerHTML = ` ${allocReceiver1}$`;
            accPartnerOutput.innerHTML = ` ${amount.toFixed(2)}$`;
            amountInput.value = allocReceiver1;

            liveSend(allocReceiver1);
        }
    }
</script>
{{ endblock }}