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

{{ block title }}
Information about your Matched Worker
{{ endblock }}

{{ block content }}
<p>Before communication starts, below is some information about the decision environment:</p>

<div class="container">
    <div class="row mb-4">
        <div class="col-4" style="text-align: center">
            To the right is some information about your Matched Worker, which is the participant with whom you share the
            common account
        </div>
        <div class="col">
            {{ include 'PartnerCard.html' with label='Matched Worker' && person=acc_partner && show_reward=True &&
            select=False }}
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-4" style="text-align: center">
            To the right is some information about the task this round is based on
        </div>
        <div class="col">
            <div class="card mx-auto" style="max-width: 540px;">
                <div class="card-header">
                    <b>Task: {{ task_name }}</b>
                </div>
                <img src="{{ static task_path }}" class="card-img-top" alt="Profile Picture">
            </div>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-4" style="text-align: center">
            To the right is some information about the common account from you and your Matched Worker for this round
        </div>
        <div class="col" style="text-align: center">
            You generated a reward of {{ player.reward }} while your matched worker generated a reward of {{
            acc_partner.reward }},
            so the total reward is {{ player.common_account }}.
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-4" style="text-align: center">
            <p> Please indicate in the slider the amount you want to keep for yourself.
                <br> You can decide to keep any amount between {{ 0|cu }} and {{ player.common_account }}.
            </p>
        </div>
        <div class="col">
            <div class="card mx-auto" style="max-width: 540px;">
                <div class="card-header">
                    <b>Intention Slider</b>
                </div>
                <div class="card-body">
                    <center>{{ formfield_errors 'intention' }}</center>
                    {{ include 'AllocationSlider.html' with label_left="You" && label_right="Your Matched Worker" &&
                    account=comm_account }}
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="intention" id="intention_id" value="-1">

{{ next_button }}

{{ endblock }}

{{ block scripts }}
<script>
    var mySlider = document.getElementById("my-slider");
    var amountInput = document.getElementById('intention_id');
    var myOutput = document.getElementById("my-amount");
    var accPartnerOutput = document.getElementById("acc-partner-amount");

    function setSlider(val) {
        mySlider.classList.remove('hidden-thumb');
        mySlider.classList.add('active-thumb');
        let amount = parseFloat(val);
        let allocation_self = (mySlider.max - amount).toFixed(2);
        myOutput.innerHTML = ` ${allocation_self}£`;
        accPartnerOutput.innerHTML = ` ${amount.toFixed(2)}£`;
        amountInput.value = allocation_self;
        mySlider.value = amount;
        return allocation_self

    }

    window.onload = () => {
        // Update the current slider value (each time you drag the slider handle)
        mySlider.onmouseup = function () {
            let allocation_self = setSlider(this.value);
        }
    }
</script>
{{ endblock }}