include bingo-layout

block content
    if username === 'anonymous'
        div(class='greyover')
        div(id='username-form', onkeypress='submitOnEnter(event, submitUsername)')
            input(type='text', id='username-input', placeholder=username)
            span Maximum is 30 characters.
            button(onclick='submitUsername()') Set Username
    div(id='content-container')
        div(id='players-container')
            h1 Players
            each player in players
                div(class='player-container', b-pid=`${player.id}`)
                    span(class='player-name-span')= player.username
        div(id='chat-container')
            div(id='chat-content')
            input(id='chat-input' type='text', placeholder='chat', onkeypress='submitOnEnter(event, sendChatMessage)')
        div(id='words-container')
            each val in grid
                div(class='bingo-word-row')
                    each field in val
                        div(class='bingo-word-panel', onclick=`submitWord('${field.base64Word}')`, b-word=field.base64Word, b-sub=`${field.submitted}`)
                            span= field.word
        div(id='button-container')
            button(id='bingo-button' onclick='submitBingo()', class='hidden') Bingo!