{{ block content }}
<br>
    <table class="table" style="text-align:center">
        <caption style="text-align: center"></caption>
    <tbody>
        <tr>
            <td><strong>Your action</strong></td>
            <td><strong>The other person's action</strong></td>
            <td><strong>Your payoff</strong></td>
            <td><strong>The other person's payoff</strong></td>
        </tr>
        <tr>
             <td>H</td>
             <td>H</td>
             <td>{{C.PAYOFF_MUTUAL_H}}</td>
             <td>{{C.PAYOFF_MUTUAL_H}}</td>
        </tr>
        <tr>
            <td>H</td>
            <td>L</td>
            <td>{{C.PAYOFF_H_WHEN_HL}}</td>
            <td>{{C.PAYOFF_L_WHEN_HL}}</td>
        </tr>
        <tr>
            <td>L</td>
            <td>H</td>
            <td>{{C.PAYOFF_L_WHEN_HL}}</td>
            <td>{{C.PAYOFF_H_WHEN_HL}}</td>
        </tr>
        <tr>
            <td>L</td>
            <td>L</td>
            <td>{{C.PAYOFF_MUTUAL_L}}</td>
            <td>{{C.PAYOFF_MUTUAL_L}}</td>
        </tr>
    </tbody>
    </table>
<br>
{{ chat }}
<br>

<style>
    .otree-chat {
        padding: 20px;
        margin: 0 0 0 0;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        align-content: space-evenly;
        z-index: 10;
        box-sizing: border-box;
        border-radius: 1rem;
        background: #FFFFFF;
        border: 1px solid lightgray
    }
    .otree-chat__messages {
        width: 100%;
        height: 400px;
        overflow: auto;
        background: #FFFFFF;
        margin: 2px 0 5px 0;
    }
    .otree-chat__nickname {
        display: inline-block;
        width: 150px;
        font-weight: bolder;
    }
    .otree-chat__input {
        size: auto;
        min-width: 10px;
        height: 34px;
        border:none;
        background-image:none;
        background-color:#FFFCFD;
        border-radius: 8px;
        flex-grow: 3;
        box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.2);
        font-family: Red hat Display, sans-serif;
        font-weight: 400;
        letter-spacing: 0.025em;
        margin-right: 10px;
        margin-top: 20px;
        padding: 0.5rem 1rem;
    }
    .otree-chat__input::placeholder {
        opacity: 0.5;
        color: #999;
    }
    .otree-chat__input:focus {
        outline: none !important;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    }
    .otree-chat__btn-send {
        margin-top: 20px;
        font-weight: bold;
        background-color: #1cbd8b;
        color: white;
        border: none;
        height: 38px;
        flex-grow: 1;
        margin-right: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.4);
        opacity: 0.7;
        transition: all .1s;
    }
    .otree-chat__btn-send:active {transform: scale(0.95);}
    .otree-chat__btn-send:hover {opacity: 1;}


</style>

<script>
    const player_id = js_vars.my_id;
    const msgContainer = document.getElementsByClassName('otree-chat__messages')[0];
    msgContainer.addEventListener('DOMNodeInserted', function () {
        const messages = msgContainer.childNodes;
        for (i = 0; i < messages.length; i++) {
            let nickname = messages[i].childNodes[0].innerHTML;
            if (nickname) {
                messages[i].id = messages[i].childNodes[0].textContent
                messages[i].childNodes[0].textContent = "";
            } else {
                nickname = messages[i].id;
            }

            const msg = messages[i].childNodes[1].textContent
            if (msg === 'auto_generated_msg_true') {
                messages[i].id = messages[i].id + '_agm_true';
                messages[i].childNodes[1].textContent = '';
            } else if (msg === 'auto_generated_msg_false') {
                messages[i].id = messages[i].id + '_agm_false';
                messages[i].childNodes[1].textContent = '';
            }

            if (messages[i].id.endsWith('_agm_true') || messages[i].id.endsWith('_agm_false')) {
                let leaveMsg;
                if (messages[i].id.endsWith('_agm_true')) {
                    if (messages[i].id.includes(player_id)) {
                        leaveMsg = 'Other player wants to leave the chat';
                    } else {
                        leaveMsg = 'You want to leave the chat';
                    }
                } else {
                    if (messages[i].id.includes(player_id)) {
                        leaveMsg = 'Other player wants to stay in the chat';
                    } else {
                        leaveMsg = 'You want to stay in the chat';
                    }
                }

                messages[i].childNodes[1].textContent = leaveMsg;
                messages[i].childNodes[0].style.width = "auto";
                messages[i].style.boxSizing = 'border-box';
                messages[i].style.fontSize = '0.8rem'
                messages[i].style.background = '#EEE'
                messages[i].style.padding = '0.25rem 1rem'
                messages[i].style.borderRadius = '20px'
                messages[i].style.width = 'fit-content'
                messages[i].style.margin = '0 auto'
                messages[i].style.marginTop = '1rem'
                messages[i].style.marginBottom = '1rem'
            } else {
                messages[i].style.boxSizing = 'border-box';
                messages[i].style.minHeight = '2rem';
                messages[i].style.padding = '12px 8px 12px 8px';
                messages[i].style.maxWidth = '66%';
                messages[i].style.width = 'fit-content';
                messages[i].style.fontWeight = '400';
                messages[i].style.lineHeight = '21px';
                messages[i].style.letterSpacing = '0.01em';
                messages[i].style.fontFamily = 'Red hat Display, sans-serif';
                messages[i].childNodes[0].style.width = "auto";
                messages[i].childNodes[1].style.padding = '10px 10px 10px 10px';

                if (nickname.includes(player_id)) {
                    messages[i].style.background = '#006AFF';
                    messages[i].style.borderRadius = '16px 16px 0 16px';
                    messages[i].style.margin = '10px 10px 10px auto';
                    messages[i].childNodes[1].style.color = "white";
                    messages[i].style.boxShadow = '2px 2px 6px rgba(0, 0, 0, 0.3)';
                } else {
                    messages[i].style.background = '#E4E4E4';
                    messages[i].style.borderRadius = '16px 16px 16px 0px';
                    messages[i].style.margin = 'auto 10px 10px 10px';
                    messages[i].style.boxShadow = '-2px 2px 6px rgba(0, 0, 0, 0.2)';
                }
            }
        }
    });

    const element = document.getElementsByClassName('otree-chat')[0];
    const buttonSend = document.getElementsByClassName('otree-chat__btn-send')[0];
    const input = document.getElementsByClassName('otree-chat__input')[0];
    input.placeholder = 'Type here...'
    const classes = element.className;

    let btn = document.createElement("button");
    btn.innerText = "Leave";
    btn.type = 'button'
    btn.setAttribute("style", "font-weight: bold;\n" +
        "        background-color: #FF6766;\n" +
        "        margin-top: 20px;\n" +
        "        color: white;\n" +
        "        border: none;\n" +
        "        height: 38px;\n" +
        "        flex-grow: 1;\n" +
        "        margin-right: 10px;\n" +
        "        box-sizing: border-box;\n" +
        "        border-radius: 8px;\n" +
        "        box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.4);\n" +
        "        opacity: 0.7;\n" +
        "        transition: all .1s;");
    element.appendChild(btn);
    btn.onmouseenter = function() {
        this.style.opacity = 1;
    }
    btn.onmouseleave = function() {
        this.style.opacity = 0.7;
    }
    btn.onmousedown = function() {
        this.style.transform = "scale(0.95)";
    }
    btn.onmouseup = function() {
        this.style.transform = "scale(1.0)";
    }

    function liveRecv(data) {
        console.log(data);
        if ('leaveChatOffer' in data) {
            var leaveChatOffer = data['leaveChatOffer']
            if (leaveChatOffer === true) {
                input.value = 'auto_generated_msg_true';
                buttonSend.click();
                input.value = '';
            } else {
                input.value = 'auto_generated_msg_false';
                buttonSend.click();
                input.value = '';
            }
        } else if ('finished' in data && data['finished']) {
            document.getElementById('form').submit();
        }
    }


    btn.onclick = function () {
        if (btn.innerText === 'Leave') {
            btn.innerText = "Stay";
            liveSend({'leaveChatOffer': true});
        } else {
            btn.innerText = "Leave";
            liveSend({'leaveChatOffer': false});
        }
    }
</script>

{{ endblock }}