document.body.onload=loadPlays()
document.getElementById('plays_nav').classList.add('active')

async function loadPlays() {

    function createPlayCard(play){

        const card_div = document.createElement('div')
        card_div.classList.add("card")
        card_div.classList.add('h-100')

        const boardgame_image_linked = document.createElement('a')
        boardgame_image_linked.setAttribute('href', '/boardgame?id=' + play.boardgame.id)
        
        const card_image = document.createElement('img')
        card_image.src = play.boardgame.image_url
        card_image.classList.add('card-img-top')
        card_image.classList.add('boardgame_play_card_image')

        boardgame_image_linked.appendChild(card_image)

        const card_body = document.createElement('div')
        card_body.classList.add('card-body')

        const card_title = document.createElement('h4')
        card_title.innerHTML = play.boardgame.name
        card_title.classList.add('card-title')

        const player_names = document.createElement('p')
        player_names.classList.add('card-text')

        for (let player_index in play.players){
            const player = play.players[player_index]
            const player_div = document.createElement('div')
            player_div.innerHTML = player.name

            if (player.has_won) {
                player_div.style.color = "green"
            }

            player_names.appendChild(player_div)
        }
        
        card_body.appendChild(card_title)
        card_body.appendChild(player_names)

        card_div.appendChild(boardgame_image_linked)
        card_div.appendChild(card_body)

        return card_div

    }

    const all_plays = await makeRequest(api_url + '/plays?filter_expansions_out=true')
    

    const row = document.createElement('row')
    row.classList.add('row')
    row.classList.add('row-cols-1')
    row.classList.add('row-cols-md-4')

    for (let play_index in all_plays){
        let current_play = all_plays[play_index]

        const column = document.createElement('div')
        column.classList.add('col')

        let card = createPlayCard(current_play)

        column.appendChild(card)

        row.appendChild(column)

    }



    // for (let row_number = 0; row_number < rows_needed; row_number++){
    //     const row_div = document.createElement('div')
    //     row_div.className = 'row'
    //     for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
    //         if(((row_number * MAX_COLUMNS) + column_number) == all_plays.length){
    //             break
    //           }
    //         const column_div = document.createElement('div')
    //         column_div.className = "col-sm-" + column_width
            
    //         const current_play = all_plays[(row_number * MAX_COLUMNS) + column_number]
    //         const play_card = createPlayCard(current_play)

    //         column_div.appendChild(play_card)
    //         row_div.appendChild(column_div)
    //     }
    //     document.body.appendChild(row_div)
    // }

    document.body.append(row)

    document.getElementById('plays_loading_spinner').remove()

}