{{ block title }}
Player: {{ player.nickname }}


{{ endblock }}



{{ block content }}
<h4>Your opinion is:</h4>
<p>{{ opinion }}</p>

<h4>Write something</h4>
<p>
    <input type="text" id="new-message" size="60">
    <button type="button" onclick="sendMsg()">Post</button>
</p>
<br>

<h4>My feed</h4>
<div id="feed">
</div>
<br>

<h4>My Connections</h4>
<table id="my-connections" class="table">

</table>
<br>

<h4>Requests Received</h4>
<table id="followers" class="table">

</table>

<br>

<h4>Requests Sent</h4>
<table id="i-follow" class="table">

</table>

<br>

<h4>Not connected</h4>
<table id="i-dont-follow" class="table">

</table>

<br>

{{ next_button }}

<script>

    let newMessage = document.getElementById('new-message');
    let feed = document.getElementById('feed');
    let followers = document.getElementById('followers');
    let i_follow = document.getElementById('i-follow');
    let i_dont_follow = document.getElementById('i-dont-follow');
    let my_connections = document.getElementById('my-connections');

    function sendMsg() {
        let text = newMessage.value.trim();
        if (text) {
            liveSend({'type': 'write', 'text': text})
        }
        newMessage.value = '';
    }

    function toggle_follow(btn) {
        liveSend({'type': 'toggle_follow', 'id_in_group': parseInt(btn.value)});
    }

    function accept(btn) {
        liveSend({'type': 'accept', 'id_in_group': parseInt(btn.value)});
    }

    function reject(btn) {
        liveSend({'type': 'reject', 'id_in_group': parseInt(btn.value)});
    }

    function disconnect(btn) {
        liveSend({'type': 'disconnect', 'id_in_group': parseInt(btn.value)});
    }

    newMessage.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendMsg();
        }
    });

    function getNickname(id_in_group) {
        return id_in_group === js_vars.my_id ? 'Me' : `Player ${id_in_group}`;
    }

    function makeUserTable(ids_in_group, table_ele, am_following) {
        let btnLabel = am_following ? 'UNDO' : 'Connect';
        table_ele.innerHTML = '';
        for (let iig of ids_in_group) {
            if (iig === js_vars.my_id) continue;
            let nickname = getNickname(iig);
            let row = `
                <tr>
                    <td>${nickname}</td>
                    <td>
                        <button type="button" value="${iig}" onclick="toggle_follow(this)">
                            ${btnLabel}
                        </button>
                    </td>
                </tr>`;

            table_ele.insertAdjacentHTML('beforeend', row)
        }
    }

    function makeResponseTable(ids_in_group, table_ele) {
        table_ele.innerHTML = '';
        for (let iig of ids_in_group) {
            if (iig === js_vars.my_id) continue;
            let nickname = getNickname(iig);
            let row = `
                <tr>
                    <td>${nickname}</td>
                    <td>
                        <button type="button" value="${iig}" onclick="accept(this)">Accept
                        </button>
                        <button type="button" value="${iig}" onclick="reject(this)">Reject
                        </button>
                    </td>
                </tr>`;

            table_ele.insertAdjacentHTML('beforeend', row)
        }
    }

    function makeConnectionsTable(ids_in_group, table_ele) {
        table_ele.innerHTML = '';
        for (let iig of ids_in_group) {
            if (iig === js_vars.my_id) continue;
            let nickname = getNickname(iig);
            let row = `
                <tr>
                    <td>${nickname}</td>
                    <td>
                        <button type="button" value="${iig}" onclick="disconnect(this)">Disconnect
                        </button>
                    </td>
                </tr>`;

            table_ele.insertAdjacentHTML('beforeend', row)
        }
    }



    function liveRecv(data) {

        if (data.full_load) {
            feed.innerHTML = '';
        }
        if ('messages' in data) {
            for (let msg of data.messages) {
                let msgSpan = document.createElement('span');
                msgSpan.textContent = msg.text;
                let sender = getNickname(msg.id_in_group);
                let row = `<div><b>${sender}</b>: ${msgSpan.innerHTML}</div>`;
                feed.insertAdjacentHTML('afterbegin', row);
            }
        }
        if ('followers' in data) {
            makeResponseTable(data.followers, followers);
        }
        if ('i_dont_follow' in data) {
            makeUserTable(data.i_dont_follow, i_dont_follow, false);
        }
        if ('i_follow' in data) {
            makeUserTable(data.i_follow, i_follow, true);
        }
        if ('my_connections' in data){
            makeConnectionsTable(data.my_connections, my_connections);
        }



    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({'type': 'load'});
    });
</script>


{{ endblock }}