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

{{ block title }}
Communication Page
{{ endblock }}

{{ block content }}

{{ if plays_alone }}
<p>Move the slider to decide how much to keep for yourself and how much to the other participant.</p>
{{ include 'AllocationSlider.html' with label_left="You" && label_right="Your Matched Worker" &&
account=player_account }}
{{ next_button }}

{{ else }}
<div class="row">
    <div class="col">
        <div class="card mx-auto" style="max-width: 1080px;">
            <div class="card-header">
                <b>Your Account</b>
            </div>
            <div class="card-body">
                <li class="list-group-item">Common Account: {{ player_account|c }}</li>
                <li class="list-group-item">Your contribution: {{ player.reward }} <br> Your Reward Type: {{
                    player.reward_group }}</li>
                <li class="list-group-item">Your Matched Worker's contribution: {{ acc_partner.reward }}<br> Your
                    Matched Worker's Reward Type: {{ acc_partner.reward_group}}</li>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card mx-auto" style="max-width: 1080px;">
            <div class="card-header">
                <b>Your Conversation Partner</b>
            </div>
            <div class="card-body">
                <li class="list-group-item">Common Account: {{ partner_account|c }}</li>
                <li class="list-group-item">Your Conversation Partner's contribution: {{ partner.reward }} <br> Your
                    Conversation Partner's Reward Type: {{ partner.reward_group }}</li>
            </div>
        </div>
    </div>
</div>
<p></p>
<p></p>
<p>Please use the chat to explain your intended split to the conversation partner, and to discuss the appropriateness of
    your decision and that of your conversation partner.
    Please refrain from sending any messages that could personally identify you. <br>
    After typing your message in the white bar, press the "Enter" key to send it.</p>

<div class="row">
    <div class="col-6">
        <div class="custom-chat-container">
            {{ chat nickname=player.name channel=player.channel_code }}
        </div>
    </div>
    <div class="col slidecontainer">
        {{ include 'AllocationSlider.html' with account=player_account && label_right="Your Matched Worker" &&
        label_left="You" }}
        <div class="row d-flex align-items-center" style="height: 50%;">
            <div class="col-3 text-end">
                Conversation Partner:<br><span id="comm-partner-amount" class="amount-label"></span>
            </div>
            <div class="col">
                <input type="range" min="0" max="{{ partner_account }}" step="0.1" class="slider hidden-thumb"
                    id="partner-slider" disabled>
            </div>
            <div class="col-3 text-start">
                Conversation Partner's Matched Worker:<br><span id="comm-acc-partner-amount"
                    class="amount-label"></span>
            </div>
        </div>
    </div>
</div>
{{ endif }}

<input type="hidden" name="allocation" id="allocation_id">

{{ endblock }}

{{ block styles }}
<style>
    .otree-chat__input {
        max-width: 87%;
    }

    .otree-chat__btn-send {
        max-width: 13%;
    }
</style>
{{ endblock }}

{{ block scripts }}
<script>
    var mySlider = document.getElementById("my-slider");
    var amountInput = document.getElementById('allocation_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

    }

    if ({{ player_intention }} >= 0) {
        let allocation_self = setSlider({{ player_account }} - {{ player_intention }});
    liveSend(allocation_self);
    }

    window.onload = () => {
        let lastMove = js_vars.last_move;
        if (lastMove !== null) {
            setSlider(mySlider.max - lastMove);
        }
        // Update the current slider value (each time you drag the slider handle)
        mySlider.onmouseup = function () {
            let allocation_self = setSlider(this.value);
            liveSend(allocation_self);
        }
    }
</script>
{{ if not plays_alone }}
<script>
    var partnerSlider = document.getElementById("partner-slider");
    var commPartnerOutput = document.getElementById("comm-partner-amount");
    var commAccPartnerOutput = document.getElementById("comm-acc-partner-amount");

    // Set Chat Placeholder
    var chatInput = document.getElementsByClassName('otree-chat__input')[0];
    chatInput.setAttribute("placeholder", "Please type your message here.");

    // Set Partner's inputs
    function setPartnerSlider(val) {
        partnerSlider.classList.remove('hidden-thumb');
        partnerSlider.classList.add('active-thumb');
        let partnerAlloc = (partnerSlider.max - val).toFixed(2);
        partnerSlider.value = partnerAlloc;
        commPartnerOutput.innerHTML = ` ${val}£`;
        commAccPartnerOutput.innerHTML = ` ${partnerAlloc}£`;

    }
    if ({{ partner_intention }} >= 0) {
        setPartnerSlider(({{ partner_intention }}).toFixed(2));
    }

    function liveRecv(amount) {
        setPartnerSlider(amount.toFixed(2));
    }

    let partnersLastMove = js_vars.partners_last_move;
    if (partnersLastMove !== null) {
        setPartnerSlider(partnersLastMove.toFixed(2));
    }
</script>
{{ endif }}
{{ endblock }}