function draw_item(item) {
    const itemdiv = document.createElement('itemdiv');
    var name = item["name"]
    var description = item["description"]
    var image = item["image"] || "../static/empty.jpg"

    namespan = document.createElement('b');
    namespan.innerText = name;
    namespan.style.display = "block"
    namespan.style.textAlign = "center"

    descriptionspan = document.createElement('span');
    descriptionspan.innerText = description;
    descriptionspan.style.display = "block"
    descriptionspan.style.width = "8rem";

    imageimg = document.createElement('img');
    imageimg.src = image;
    imageimg.style.width = "8rem";
    imageimg.style.display = "block"

    itemdiv.appendChild(namespan);
    itemdiv.appendChild(imageimg);
    itemdiv.appendChild(descriptionspan);
    itemdiv.style.display = "inline-block"
    itemdiv.style.background = "lightcoral"
    itemdiv.setAttribute("itemid", item["id"]);
    return itemdiv
}

var text = document.getElementById("msg").innerText
msg = JSON.parse(text)

document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
                    method: 'POST', body: JSON.stringify({})
                });
document.getElementById("session").innerText = msg.session;
document.getElementById('label-username').innerText = msg.username;
//fill inventory and inventories
inventorydiv = document.getElementById("inventory");
inventoriesdiv = document.getElementById("inventories");

while (inventorydiv.children.length) inventorydiv.lastChild.remove();
while (inventoriesdiv.children.length) inventoriesdiv.lastChild.remove();

username = msg.username;
inventories = msg.inventories;

if (username in inventories) {
    inventory = inventories[username]

    Object.keys(inventory).forEach( item => {

        var item = inventory[item];
        itemdiv = draw_item(item);
        inventorydiv.appendChild(itemdiv);

    });
}
    Object.keys(inventories).forEach( inventory => {
        if (!(inventory in inventories))
            return;
        if (inventory == username)
            return;
        var wrapper = document.createElement('div')
        var usernamespan = document.createElement('span')
        usernamespan.innerText = inventory;
        var inventorydiv = document.createElement('div')
        Object.keys(inventories[inventory]).forEach( item => {
            var item = inventories[inventory][item];
            itemdiv = draw_item(item);
            inventorydiv.appendChild(itemdiv);
        });
        //inventorydiv.appendChild(itemdiv);
        wrapper.appendChild(usernamespan)
        wrapper.appendChild(inventorydiv)
        inventoriesdiv.appendChild(wrapper);

    });