const listRow = function (content) {
    return builder.tableRow()
        .componentChildren([
            builder.tableCell().text("1"),
            builder.tableCell().text("Info 1"),
            builder.tableCell().text("Info 2"),
            builder.tableCell().text("Info 3")
        ])
}


function listColumn(colText, bckColor, id) {
    return builder.column()
        .setAttribute("id", id)
        .alignment(Alignment.CENTER)
        .modifier(
            new Modifier()
                .fillMaxWidth(0.497)
                .background(bckColor)
                .clip(Shapes.RoundedCorner.all(15))
        )
        .componentChildren([
            builder.header(2)
                .text(colText)
                .alignment(Alignment.CENTER)
                .chainModifier()
                .padding(new Siding().all(32))
            ,
            builder.table()
                .chainModifier()
                .fillMaxWidth()
                .linkPadding().all(16)
                .componentChild(
                    builder.tableBody()
                        .addStyleClass("list-table-body")
                        .componentChild(
                            listRow()
                        )
                )
        ])
}


const currentElementDisplay = function (fields) {
    return builder.column()
        .modifier(
            new Modifier()
                .fillMaxWidth()
        )
        .componentChildren([
            builder.row()
                .componentChildren([
                    builder.button()
                        .text("Load Next")
                        .setEvent(CommonEvents.ONCLICK, "rotateCurrentElement")
                        .chainModifier()
                        .fillMaxWidth(0.2)
                    ,
                    builder.input({ "type": "number" })
                ])
            ,
            builder.table()
                .setAttribute("hidden", "true")
                .componentChild(builder.tableBody())
        ])
}


const currentSection = function () {
    return builder.column()
        .setAttribute("id", "current")
        .alignment(Alignment.CENTER)
        .chainModifier()
        .fillMaxWidth()
        .linkPadding().vertical(8)
        .componentChild(
            builder.column()
                .chainModifier()
                .fillMaxWidth()
                .background(MaterialFiveHundredlColors.GOLD)
                .clip(Shapes.RoundedCorner.all(15))
                .linkPadding().horizontal(32).vertical(32)
                .componentChildren([
                    builder.header(2)
                        .text("Current Element")
                        .chainModifier()
                        .linkPadding()
                        .bottom(8)
                    ,
                    currentElementDisplay()
                ])
        )
}