fullscreen {
    options_list {
        scroll_panel {
            scroll_bar {
                scroll_thumb
            }
            content {
                opt_header {
                    cell {
                        line
                    }
                    cell_text {
                        header {
                            " Render Options "
                        }
                    }
                    cell {
                        line
                    }
                }
                option {
                    label_center(
                        key = "shadow_res",
                        tooltip = "Controls the quality of shadows"
                    ) {
                        label {
                            "Shadows"
                        }
                    }
                    dropdown(
                        id = "shadow_res",
                        value = 1,
                        options = 4,
                        option1 = "Disabled",
                        option2 = "Low (1024)",
                        option3 = "Medium (2048)",
                        option4 = "High (4096)"
                    ) {
                        content {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "ssao_level",
                        tooltip = "Controls the quality of SSAO"
                    ) {
                        label {
                            "SSAO"
                        }
                    }
                    dropdown(
                        id = "ssao_level",
                        value = 1,
                        options = 5,
                        option1 = "Disabled",
                        option2 = "Low (8)",
                        option3 = "Medium (16)",
                        option4 = "High (32)",
                        option5 = "Ultra (64)"
                    ) {
                        content {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "fxaa",
                        tooltip = "Enables or disables FXAA"
                    ) {
                        label {
                            "FXAA"
                        }
                    }
                    dropdown(
                        id = "fxaa",
                        value = 1,
                        options = 2,
                        option1 = "Disabled",
                        option2 = "Enabled"
                    ) {
                        content {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "render_scale",
                        tooltip = "Controls the rendering scale. Lowering renders at a small size to increase performance at the cost of looks"
                    ) {
                        label {
                            "Render Scale"
                        }
                    }
                    slider(
                        min=0, max=100, value=100, format="%d%%",
                        id = "render_scale"
                    ) {
                        slider_thumb
                        slider_value {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "ui_scale",
                        tooltip = "Controls the UI scale. Useful for high-res displays."
                    ) {
                        label {
                            "UI Scale"
                        }
                    }
                    slider(
                        min=0.1, max=6, value=1, format="%.1f",
                        id = "ui_scale"
                    ) {
                        slider_thumb
                        slider_value {
                            ""
                        }
                    }
                }
                opt_header {
                    cell {
                        line
                    }
                    cell_text {
                        header {
                            " Colour Options "
                        }
                    }
                    cell {
                        line
                    }
                }
                option {
                    label_center(
                        key = "placement_valid",
                        tooltip = "Controls the look of the placement grid when the placement is valid"
                    ) {
                        label {
                            "Placement Valid Colour"
                        }
                    }
                    colour_display(id = "placement_valid", colour="#FF00FF")
                }
                option {
                    label_center(
                        key = "placement_valid_red",
                        tooltip = "Red the component"
                    ) {
                        label {
                            "Red"(colour="#ff0000")
                        }
                    }
                    slider(
                        min=0, max=255, value=255, format="%d",
                        id = "placement_valid_red"
                    ) {
                        slider_thumb
                        slider_value {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "placement_valid_green",
                        tooltip = "Green the component"
                    ) {
                        label {
                            "Green"(colour="#00ff00")
                        }
                    }
                    slider(
                        min=0, max=255, value=255, format="%d",
                        id = "placement_valid_green"
                    ) {
                        slider_thumb
                        slider_value {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "placement_valid_blue",
                        tooltip = "Blue the component"
                    ) {
                        label {
                            "Blue"(colour="#0000ff")
                        }
                    }
                    slider(
                        min=0, max=255, value=255, format="%d",
                        id = "placement_valid_blue"
                    ) {
                        slider_thumb
                        slider_value {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "placement_invalid",
                        tooltip = "Controls the look of the placement grid when the placement is invalid"
                    ) {
                        label {
                            "Placement Invalid Colour"
                        }
                    }
                    colour_display(id = "placement_invalid", colour="#FF00FF")
                }
                option {
                    label_center(
                        key = "placement_invalid_red",
                        tooltip = "Red the component"
                    ) {
                        label {
                            "Red"(colour="#ff0000")
                        }
                    }
                    slider(
                        min=0, max=255, value=255, format="%d",
                        id = "placement_invalid_red"
                    ) {
                        slider_thumb
                        slider_value {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "placement_invalid_green",
                        tooltip = "Green the component"
                    ) {
                        label {
                            "Green"(colour="#00ff00")
                        }
                    }
                    slider(
                        min=0, max=255, value=255, format="%d",
                        id = "placement_invalid_green"
                    ) {
                        slider_thumb
                        slider_value {
                            ""
                        }
                    }
                }
                option {
                    label_center(
                        key = "placement_invalid_blue",
                        tooltip = "Blue the component"
                    ) {
                        label {
                            "Blue"(colour="#0000ff")
                        }
                    }
                    slider(
                        min=0, max=255, value=255, format="%d",
                        id = "placement_invalid_blue"
                    ) {
                        slider_thumb
                        slider_value {
                            ""
                        }
                    }
                }
            }
        }
    }

    button(
        x=16, bottom=16, width=200, height=40,
        on_click="init#ui.emit_accept(node)"
    ) {
        content {
            "Back"
        }
    }
}