const fileSelection = function (labelText) {
    return builder.row()
        .arrangement(Arrangement.SPACE_BETWEEN)
        .modifier(
            new Modifier().fillMaxWidth()
                .padding(
                    new Siding()
                        .horizontal(64)
                        .vertical(16)
                )
        )
        .childContext([
            builder.label().text(labelText),
            builder.input().setAttribute("type", "file")
        ])
}

const fileSelectionSection = function () {
    return builder.column()
        .arrangement(Arrangement.CENTER)
        .modifier(
            new Modifier()
                .fillMaxWidth()
                .padding(new Siding().vertical(16))
        )
        .childContext([
            fileSelection("Script"),
            builder.row()
                .arrangement(Arrangement.CENTER)
                .modifier(
                    new Modifier().fillMaxWidth()
                )
                .childContext([
                    builder.button()
                        .text('+')
                        .setEvent(CommonEvents.ONCLICK, "addFileSelection")
                ])
        ])
}

builder.page    (
    builder.column()
        .modifier(
            new Modifier()
                .fillMaxSize()
        )
        .childContext([
            builder.row()
                .arrangement(Arrangement.SPACE_BETWEEN)
                .modifier(
                    new Modifier().fillMaxWidth()
                )
                .childContext([
                    builder.header(1).text("Script Executer"),
                    builder.img().setAttribute("alt", "Logo")
                ])
            ,
            fileSelectionSection()
            ,
            builder.row()
                .arrangement(Arrangement.CENTER)
                .childContext(
                    builder.button()
                        .text("Execute Script")
                )
        ])
)