/**
* data = [
*                   [{id:1, booked:true}, {id:2, booked:false}, {id:3, booked:false}],
*                   [{id:4, booked:false}, {id:5, booked:false}, {id:6, booked:false}],
*               ]
*
* <table id= "seats" cellspacing ="1" cellpadding = "1" border = "1">
*    <thead>
*     <tr>
*      <th>Rad 1</th> <th> Rad 2 </th> <th> Rad 3 </th>
*     </tr>
*    </thead>
*    <tbody>
*     <tr>
*      <td> 1 </td> <td> 2 </td> <td> 3 </td>
*     </tr>
*     <tr>
*      <td> 4 </td> <td> 5 </td> <td> 6 </td>
*     </tr>
*    </tbody>
*  </table>
*/
function renderSeats(data) {
    var seatTable = '<table id= "seats" cellspacing ="1" cellpadding = "1" border = "1">'

    for(var row = 0; row < data.length; row++) {

        // Build header
        if(row == 0) {
            seatTable += '<thead>'
            seatTable += '<tr>'
            for(var column = 0; column < data[row].length; column++) {
                const columnNumber = column+1
                seatTable += '<th>Rad '+columnNumber +'</th>'
            }
            seatTable += '</tr>'
            seatTable += '</thead>'
            seatTable += '</tbody>'
        }

        seatTable += '<tr>'
            for(var column = 0; column < data[row].length; column++) {
                const seat = data[row][column]
                seatTable += '<td>' +seat.id +'</td>'
            }
        seatTable += '</tr>'
    }

    seatTable += '</tbody>'
    seatTable += '</table>'

    document.getElementById("seats").innerHTML = seatTable;
}