// Copyright (C) 2026 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: root
    width: settingsDrawer.width
    height: parent.height
    property alias drawerVisible: settingsDrawer.visible
    property bool drawerOpen: settingsDrawer.position === 1.0

    property real shadowFactor: sliderDirectionaLightShadowFactor.value
    property vector3d eulerRotation: Qt.vector3d(sliderDirectionalLightRotX.value,
                                                       sliderDirectionalLightRotY.value, 0)
    property real csmSplit1: sliderCSMSplit1.value
    property real csmSplit2: sliderCSMSplit2.value
    property real csmSplit3: sliderCSMSplit3.value
    property int csmNumSplits: sliderNumSplits.currentIndex
    property int shadowMapQuality: shadowmapquality_combobox.currentIndex
    property real csmBlendRatio: sliderBlendRatio.value
    property real shadowBias: sliderShadowBiasDirLight.value
    property real pcfFactor: sliderPCFFactor.value
    property int softShadowQuality: softshadowquality_combobox.currentIndex
    property real shadowMapFar: sliderShadowMapFar.value
    property real clipFar: sliderCameraClipFar.value
    property bool lockShadowmapTexels: checkboxLockShadowmapTexels.checked
    property real fogSpeed: fogSpeedSlider.value
    property real jitterIntensity: jitterIntensitySlider.value
    property bool enableMotionVectorTAA: checkboxEnableMotionVectorTAA.checked
    property bool spotLightEnabled: checkboxSpotLight.checked
    property bool dirLightEnabled: checkboxDirLight.checked
    property bool pointLightEnabled: checkboxPointLight.checked
    property bool iesLights: checkboxIESLights.checked
    property int iesLightIndex: iesIndexSpinBox.value
    property bool spotLightShadow: checkboxSpotLightShadow.checked
    property bool dirLightShadow: checkboxDirLightShadow.checked
    property bool pointLightShadow: checkboxPointLightShadow.checked
    property bool iesLightsShadow: checkboxIESLightsShadow.checked
    property bool sceneVisible: checkboxScene.checked

    property color fogVolumeColor: Qt.rgba(fogVolumeColorR.value, fogVolumeColorG.value, fogVolumeColorB.value, 1.0)
    property real fogVolumeDensity: fogVolumeDensitySlider.value
    property real fogVolumeNoiseScale: fogVolumeNoiseScaleSlider.value
    property bool fogVolumeHeightEnabled: fogVolumeHeightEnabledCheck.checked
    property real fogVolumeHeightLeastY: fogVolumeHeightLeastYSlider.value
    property real fogVolumeHeightMostY: fogVolumeHeightMostYSlider.value
    property real fogVolumeHeightCurve: fogVolumeHeightCurveSlider.value

    property real viewX: settingsDrawer.visible ? (settingsDrawer.x + settingsDrawer.width) : 0

    readonly property color clBg: "#11111b"
    readonly property color clSurface: "#1e1e2e"
    readonly property color clSurface2: "#27273d"
    readonly property color clBorder: "#313244"
    readonly property color clTextPrimary: "#cdd6f4"
    readonly property color clTextMuted: "#6c7086"
    readonly property color clBlue: "#89b4fa"
    readonly property color clGreen: "#a6e3a1"
    readonly property color clYellow: "#f9e2af"
    readonly property color clRed: "#f38ba8"
    readonly property color clPurple: "#cba6f7"
    readonly property color clTeal: "#94e2d5"
    readonly property color clOrange: "#fab387"

    RoundButton {
        id: iconOpen
        icon.source: "assets/sliders.svg"
        icon.width: 25
        icon.height: 25
        padding: 10
        x: padding + root.viewX
        y: padding
        onClicked: {
            settingsDrawer.visible = !settingsDrawer.visible;
        }
    }

    Drawer {
        id: settingsDrawer
        edge: Qt.LeftEdge
        interactive: false
        modal: false
        height: parent.height
        width: 300

        background: Rectangle { color: root.clBg }

        enter: Transition { NumberAnimation { property: "position"; to: 1.0; duration: 280; easing.type: Easing.OutCubic } }
        exit: Transition { NumberAnimation { property: "position"; to: 0.0; duration: 280; easing.type: Easing.InCubic } }

        Page {
            anchors.fill: parent
            background: Rectangle { color: root.clBg }

            header: Rectangle {
                width: parent.width
                height: 46
                color: root.clSurface
                Rectangle {
                    anchors.bottom: parent.bottom
                    width: parent.width; height: 1
                    color: root.clBorder
                }
                Label {
                    anchors.centerIn: parent
                    text: "SETTINGS"
                    font.pixelSize: 12
                    font.weight: Font.DemiBold
                    color: root.clTextPrimary
                }
            }

            ScrollView {
                anchors.fill: parent
                ScrollBar.vertical.policy: ScrollBar.AsNeeded
                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                contentWidth: availableWidth

                ColumnLayout {
                    id: settingsArea
                    width: parent.width
                    spacing: 0

                    component SectionHeader : Rectangle {
                        id: secHdr
                        property string title: ""
                        property color  accent: root.clBlue
                        property bool   expanded: true

                        Layout.fillWidth: true
                        height: 34
                        color: Qt.rgba(secHdr.accent.r, secHdr.accent.g, secHdr.accent.b, 0.09)

                        Rectangle {
                            width: 3; height: parent.height
                            color: secHdr.accent; radius: 1
                        }
                        Label {
                            anchors { left: parent.left; leftMargin: 14; verticalCenter: parent.verticalCenter }
                            text: secHdr.title
                            font.pixelSize: 10; font.weight: Font.DemiBold
                            font.capitalization: Font.AllUppercase;
                            color: secHdr.accent
                        }
                        Label {
                            anchors { right: parent.right; rightMargin: 12; verticalCenter: parent.verticalCenter }
                            text: secHdr.expanded ? "▴" : "▾"
                            color: Qt.rgba(secHdr.accent.r, secHdr.accent.g, secHdr.accent.b, 0.55)
                            font.pixelSize: 10
                        }
                        MouseArea {
                            anchors.fill: parent
                            cursorShape: Qt.PointingHandCursor
                            onClicked: secHdr.expanded = !secHdr.expanded
                        }
                    }

                    component SliderRow : ColumnLayout {
                        id: slRow
                        property string label: ""
                        property alias  value: sl.value
                        property alias  from: sl.from
                        property alias  to: sl.to
                        property alias  stepSize: sl.stepSize
                        property int    numDecimals: 0
                        property color  accentColor: root.clBlue

                        Layout.fillWidth: true
                        Layout.leftMargin: 14; Layout.rightMargin: 14; Layout.topMargin: 8
                        spacing: 3

                        RowLayout {
                            Layout.fillWidth: true
                            spacing: 4
                            Label {
                                text: slRow.label
                                font.pixelSize: 11; color: root.clTextMuted
                                Layout.fillWidth: true; elide: Text.ElideRight
                            }
                            Label {
                                text: sl.value.toFixed(slRow.numDecimals)
                                font.pixelSize: 11; font.weight: Font.Medium
                                color: root.clTextPrimary
                                horizontalAlignment: Text.AlignRight
                                Layout.minimumWidth: 44
                            }
                        }

                        Slider {
                            id: sl
                            Layout.fillWidth: true
                            implicitHeight: 22
                            stepSize: 0.01

                            background: Item {
                                implicitWidth: 200; implicitHeight: 4
                                Rectangle {
                                    anchors.verticalCenter: parent.verticalCenter
                                    width: parent.width; height: 4; radius: 2
                                    color: root.clBorder
                                    Rectangle {
                                        width: sl.visualPosition * parent.width
                                        height: parent.height; radius: 2
                                        color: slRow.accentColor
                                    }
                                }
                            }
                            handle: Rectangle {
                                x: sl.leftPadding + sl.visualPosition * (sl.availableWidth - width)
                                y: sl.topPadding + sl.availableHeight / 2 - height / 2
                                implicitWidth: 14; implicitHeight: 14; radius: 7
                                color: sl.pressed ? Qt.lighter(slRow.accentColor, 1.5)
                                                  : (sl.hovered ? Qt.lighter(slRow.accentColor, 1.2)
                                                                : slRow.accentColor)
                                Behavior on color { ColorAnimation { duration: 100 } }
                            }
                        }
                    }

                    component StyledCheckBox : CheckBox {
                        id: styledCb
                        property color accentColor: root.clBlue

                        Layout.leftMargin: 14; Layout.topMargin: 4

                        contentItem: Label {
                            text: styledCb.text
                            leftPadding: styledCb.indicator.width + 6
                            color: root.clTextPrimary; font.pixelSize: 12
                            verticalAlignment: Text.AlignVCenter
                        }
                        indicator: Rectangle {
                            implicitWidth: 16; implicitHeight: 16
                            x: styledCb.leftPadding
                            y: (styledCb.height - height) / 2
                            radius: 3
                            color: styledCb.checked ? styledCb.accentColor : "transparent"
                            border.color: styledCb.checked ? styledCb.accentColor : root.clBorder
                            border.width: 1.5
                            Behavior on color { ColorAnimation { duration: 100 } }
                            Label {
                                anchors.centerIn: parent
                                text: "✓"; font.pixelSize: 10; color: root.clBg
                                visible: styledCb.checked
                            }
                        }
                    }

                    component ShadowCheckBox : CheckBox {
                        id: shadowCb
                        property color accentColor: root.clBlue

                        contentItem: Label {
                            text: "shadow"
                            leftPadding: shadowCb.indicator.width + 4
                            color: root.clTextMuted; font.pixelSize: 10
                            verticalAlignment: Text.AlignVCenter
                        }
                        indicator: Rectangle {
                            implicitWidth: 13; implicitHeight: 13
                            x: shadowCb.leftPadding
                            y: (shadowCb.height - height) / 2
                            radius: 2
                            color: shadowCb.checked ? shadowCb.accentColor : "transparent"
                            border.color: shadowCb.checked ? shadowCb.accentColor : root.clBorder
                            border.width: 1.5
                            Behavior on color { ColorAnimation { duration: 100 } }
                            Label {
                                anchors.centerIn: parent
                                text: "✓"; font.pixelSize: 9; color: root.clBg
                                visible: shadowCb.checked
                            }
                        }
                    }

                    component ComboRow : RowLayout {
                        id: comboRow
                        property string label: ""
                        property alias  model: cb.model
                        property alias  currentIndex: cb.currentIndex
                        property color  accentColor: root.clBlue
                        property int    comboWidth: 100

                        Layout.fillWidth: true
                        Layout.leftMargin: 14; Layout.rightMargin: 14; Layout.topMargin: 8
                        spacing: 8

                        Label {
                            text: comboRow.label
                            font.pixelSize: 11; color: root.clTextMuted
                            Layout.fillWidth: true; elide: Text.ElideRight
                        }
                        ComboBox {
                            id: cb
                            implicitWidth: comboRow.comboWidth; implicitHeight: 26
                            font.pixelSize: 11
                            contentItem: Label {
                                leftPadding: 8; rightPadding: 24
                                text: cb.currentText
                                color: root.clTextPrimary; font.pixelSize: 11
                                verticalAlignment: Text.AlignVCenter; elide: Text.ElideRight
                            }
                            indicator: Label {
                                x: cb.width - width - 6
                                y: (cb.height - height) / 2
                                text: "▾"; font.pixelSize: 9
                                color: root.clTextMuted
                            }
                            background: Rectangle {
                                color: cb.hovered ? root.clSurface2 : root.clSurface
                                radius: 4
                                border.color: cb.hovered ? comboRow.accentColor : root.clBorder
                                border.width: 1
                                Behavior on border.color { ColorAnimation { duration: 120 } }
                            }
                            popup: Popup {
                                y: cb.height + 2
                                width: cb.width
                                padding: 4
                                background: Rectangle {
                                    color: root.clSurface2; radius: 5
                                    border.color: root.clBorder; border.width: 1
                                }
                                contentItem: ListView {
                                    clip: true
                                    implicitHeight: Math.min(contentHeight, 180)
                                    model: cb.delegateModel
                                    ScrollBar.vertical: ScrollBar {}
                                }
                            }
                            delegate: ItemDelegate {
                                width: cb.width - 8
                                height: 26
                                highlighted: cb.highlightedIndex === index
                                contentItem: Label {
                                    text: modelData
                                    color: highlighted ? root.clTextPrimary : root.clTextMuted
                                    font.pixelSize: 11
                                    verticalAlignment: Text.AlignVCenter
                                    leftPadding: 4
                                }
                                background: Rectangle {
                                    color: highlighted ? root.clBorder : "transparent"
                                    radius: 3
                                }
                            }
                        }
                    }

                    component SectionSep : Rectangle {
                        Layout.fillWidth: true
                        height: 1; color: root.clBorder
                    }

                    SectionHeader { id: hdrDirLight; title: "Directional Light"; accent: root.clYellow }

                    ColumnLayout {
                        visible: hdrDirLight.expanded
                        Layout.fillWidth: true; Layout.bottomMargin: 6; spacing: 0

                        SliderRow {
                            id: sliderDirectionalLightRotX
                            label: "Rotation X"
                            value: -160; from: -180; to: 0
                            accentColor: root.clYellow
                        }
                        SliderRow {
                            id: sliderDirectionalLightRotY
                            label: "Rotation Y"
                            value: 10; from: -180; to: 180
                            accentColor: root.clYellow
                        }
                    }

                    SectionSep {}

                    SectionHeader { id: hdrLights; title: "Lights"; accent: root.clOrange }

                    ColumnLayout {
                        visible: hdrLights.expanded
                        Layout.fillWidth: true; Layout.bottomMargin: 8; spacing: 0

                        RowLayout {
                            Layout.fillWidth: true
                            Layout.leftMargin: 14; Layout.topMargin: 4; Layout.rightMargin: 14
                            spacing: 8
                            ShadowCheckBox {
                                id: checkboxSpotLightShadow
                                checked: true; accentColor: root.clYellow
                                opacity: checkboxSpotLight.checked ? 1.0 : 0.35
                                Behavior on opacity { NumberAnimation { duration: 120 } }
                            }
                            StyledCheckBox {
                                id: checkboxSpotLight
                                checked: true; text: "Spot Light"
                                accentColor: root.clYellow
                                Layout.leftMargin: 0; Layout.topMargin: 0; Layout.fillWidth: true
                            }
                        }
                        RowLayout {
                            Layout.fillWidth: true
                            Layout.leftMargin: 14; Layout.topMargin: 4; Layout.rightMargin: 14
                            spacing: 8
                            ShadowCheckBox {
                                id: checkboxDirLightShadow
                                checked: true; accentColor: root.clYellow
                                opacity: checkboxDirLight.checked ? 1.0 : 0.35
                                Behavior on opacity { NumberAnimation { duration: 120 } }
                            }
                            StyledCheckBox {
                                id: checkboxDirLight
                                checked: true; text: "Directional Light"
                                accentColor: root.clYellow
                                Layout.leftMargin: 0; Layout.topMargin: 0; Layout.fillWidth: true
                            }
                        }
                        RowLayout {
                            Layout.fillWidth: true
                            Layout.leftMargin: 14; Layout.topMargin: 4; Layout.rightMargin: 14
                            spacing: 8
                            ShadowCheckBox {
                                id: checkboxPointLightShadow
                                checked: true; accentColor: root.clRed
                                opacity: checkboxPointLight.checked ? 1.0 : 0.35
                                Behavior on opacity { NumberAnimation { duration: 120 } }
                            }
                            StyledCheckBox {
                                id: checkboxPointLight
                                checked: true; text: "Point Light"
                                accentColor: root.clRed
                                Layout.leftMargin: 0; Layout.topMargin: 0; Layout.fillWidth: true
                            }
                        }
                        RowLayout {
                            Layout.fillWidth: true
                            Layout.leftMargin: 14; Layout.topMargin: 4; Layout.rightMargin: 14
                            spacing: 8

                            ShadowCheckBox {
                                id: checkboxIESLightsShadow
                                checked: true; accentColor: root.clOrange
                                opacity: checkboxIESLights.checked ? 1.0 : 0.35
                                Behavior on opacity { NumberAnimation { duration: 120 } }
                            }

                            StyledCheckBox {
                                id: checkboxIESLights
                                checked: false; text: "IES Lights"
                                onCheckStateChanged: {
                                    if (checkState) {
                                        checkboxDirLight.checked = false
                                        checkboxSpotLight.checked = false
                                        checkboxPointLight.checked = false
                                    }
                                }
                                accentColor: root.clOrange
                                Layout.leftMargin: 0; Layout.topMargin: 0; Layout.fillWidth: true
                            }

                            Label {
                                text: "Index"
                                font.pixelSize: 11
                                color: root.clTextMuted
                                opacity: checkboxIESLights.checked ? 1.0 : 0.35
                                Behavior on opacity { NumberAnimation { duration: 120 } }
                            }

                            SpinBox {
                                id: iesIndexSpinBox
                                from: 0; to: 5; value: 0
                                implicitWidth: 84; implicitHeight: 24
                                enabled: checkboxIESLights.checked
                                opacity: enabled ? 1.0 : 0.35
                                Behavior on opacity { NumberAnimation { duration: 120 } }

                                background: Rectangle {
                                    color: root.clSurface2
                                    border.color: iesIndexSpinBox.activeFocus ? root.clOrange : root.clBorder
                                    border.width: 1
                                    radius: 4
                                    Behavior on border.color { ColorAnimation { duration: 100 } }
                                }
                                contentItem: TextInput {
                                    text: iesIndexSpinBox.textFromValue(iesIndexSpinBox.value, iesIndexSpinBox.locale)
                                    color: root.clTextPrimary
                                    font.pixelSize: 11
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    readOnly: !iesIndexSpinBox.editable
                                    validator: iesIndexSpinBox.validator
                                    inputMethodHints: Qt.ImhFormattedNumbersOnly
                                }
                            }
                        }
                        StyledCheckBox {
                            id: checkboxScene
                            checked: true; text: "Scene"
                            accentColor: root.clTeal
                        }
                    }

                    SectionSep {}

                    SectionHeader { id: hdrFog; title: "Fog"; accent: root.clTeal }

                    ColumnLayout {
                        visible: hdrFog.expanded
                        Layout.fillWidth: true; Layout.bottomMargin: 6; spacing: 0

                        SliderRow {
                            id: fogSpeedSlider
                            label: "Speed"
                            value: 0.4; from: 0; to: 1; numDecimals: 3
                            accentColor: root.clTeal
                        }
                        SliderRow {
                            id: fogVolumeNoiseScaleSlider
                            label: "Noise Scale"
                            value: 0.30; from: 0.01; to: 4.0; numDecimals: 2
                            accentColor: root.clTeal
                        }

                        RowLayout {
                            Layout.fillWidth: true
                            Layout.leftMargin: 14; Layout.rightMargin: 14; Layout.topMargin: 8
                            spacing: 4
                            Label {
                                text: "Color"
                                font.pixelSize: 11; color: root.clTextMuted
                                Layout.fillWidth: true; elide: Text.ElideRight
                            }
                            Rectangle {
                                width: 44; height: 14; radius: 2
                                color: root.fogVolumeColor
                                border.color: root.clBorder; border.width: 1
                            }
                        }
                        SliderRow { id: fogVolumeColorR; label: "R"; from: 0; to: 1; value: 1.0; numDecimals: 2; accentColor: root.clRed;   Layout.topMargin: 2 }
                        SliderRow { id: fogVolumeColorG; label: "G"; from: 0; to: 1; value: 1.0; numDecimals: 2; accentColor: root.clGreen; Layout.topMargin: 2 }
                        SliderRow { id: fogVolumeColorB; label: "B"; from: 0; to: 1; value: 1.0; numDecimals: 2; accentColor: root.clBlue;  Layout.topMargin: 2 }

                        SliderRow {
                            id: fogVolumeDensitySlider
                            label: "Density"
                            value: 0.5; from: 0; to: 3; numDecimals: 2
                            accentColor: root.clTeal
                        }

                        StyledCheckBox {
                            id: fogVolumeHeightEnabledCheck
                            text: "Height Falloff"
                            accentColor: root.clTeal
                        }
                        SliderRow {
                            id: fogVolumeHeightLeastYSlider
                            label: "Least Intense Y"
                            from: -2000; to: 3000; stepSize: 50; value: 900; numDecimals: 0
                            accentColor: root.clTeal
                            visible: fogVolumeHeightEnabledCheck.checked
                        }
                        SliderRow {
                            id: fogVolumeHeightMostYSlider
                            label: "Most Intense Y"
                            from: -2000; to: 3000; stepSize: 50; value: 800; numDecimals: 0
                            accentColor: root.clTeal
                            visible: fogVolumeHeightEnabledCheck.checked
                        }
                        SliderRow {
                            id: fogVolumeHeightCurveSlider
                            label: "Height Curve"
                            from: 0.1; to: 5.0; stepSize: 0.1; value: 1.0; numDecimals: 1
                            accentColor: root.clTeal
                            visible: fogVolumeHeightEnabledCheck.checked
                        }
                    }

                    SectionSep {}

                    SectionHeader { id: hdrPost; title: "Post-Process"; accent: root.clGreen }

                    ColumnLayout {
                        visible: hdrPost.expanded
                        Layout.fillWidth: true; Layout.bottomMargin: 10; spacing: 0

                        StyledCheckBox {
                            id: checkboxEnableMotionVectorTAA
                            checked: true; text: "Motion Vector TAA"
                            accentColor: root.clGreen
                        }
                        SliderRow {
                            id: jitterIntensitySlider
                            label: "Jitter Intensity"
                            value: 0.015; from: 0; to: 0.1; stepSize: 0.001; numDecimals: 3
                            accentColor: root.clGreen
                        }
                    }


                    SectionHeader { id: hdrShadows; title: "Shadows"; accent: root.clRed }

                    ColumnLayout {
                        visible: hdrShadows.expanded
                        Layout.fillWidth: true; Layout.bottomMargin: 6; spacing: 0

                        SliderRow {
                            id: sliderDirectionaLightShadowFactor
                            label: "Shadow Factor"
                            value: 75; from: 0; to: 100; stepSize: 1
                            accentColor: root.clRed
                        }
                        SliderRow {
                            id: sliderShadowBiasDirLight
                            label: "Shadow Bias"
                            value: 10; from: 0; to: 30; stepSize: 1
                            accentColor: root.clRed
                        }
                        SliderRow {
                            id: sliderShadowMapFar
                            label: "Shadow Map Far"
                            value: 10000; from: 0; to: 30000; stepSize: 1000
                            accentColor: root.clRed
                        }

                        ComboRow {
                            id: softshadowquality_combobox
                            label: "Soft Shadow"
                            model: ["Hard", "PCF4", "PCF8", "PCF16"]
                            currentIndex: 3
                            accentColor: root.clRed; comboWidth: 90
                        }
                        ComboRow {
                            id: shadowmapquality_combobox
                            label: "Map Quality"
                            model: ["Low", "Medium", "High", "VeryHigh", "Ultra"]
                            currentIndex: 2
                            accentColor: root.clRed; comboWidth: 90
                        }

                        StyledCheckBox {
                            id: checkboxLockShadowmapTexels
                            checked: false; text: "Lock Shadowmap Texels"
                            accentColor: root.clRed
                        }
                    }

                    SectionSep {}

                    SectionHeader { id: hdrCSM; title: "Cascade Shadows"; accent: root.clPurple }

                    ColumnLayout {
                        visible: hdrCSM.expanded
                        Layout.fillWidth: true; Layout.bottomMargin: 6; spacing: 0

                        ComboRow {
                            id: sliderNumSplits
                            label: "Num Splits"
                            model: ["0", "1", "2", "3"]
                            currentIndex: 0
                            accentColor: root.clPurple; comboWidth: 60
                        }
                        SliderRow {
                            id: sliderCSMSplit1
                            label: "Split 1"
                            value: 0.15; from: 0.01; to: 0.99; numDecimals: 2
                            accentColor: root.clPurple
                        }
                        SliderRow {
                            id: sliderCSMSplit2
                            label: "Split 2"
                            value: 0.5; from: 0.01; to: 0.99; numDecimals: 2
                            accentColor: root.clPurple
                        }
                        SliderRow {
                            id: sliderCSMSplit3
                            label: "Split 3"
                            value: 0.75; from: 0.01; to: 0.99; numDecimals: 2
                            accentColor: root.clPurple
                        }
                        SliderRow {
                            id: sliderBlendRatio
                            label: "Blend Ratio"
                            value: 0.05; from: 0; to: 1; numDecimals: 2
                            accentColor: root.clPurple
                        }
                        SliderRow {
                            id: sliderPCFFactor
                            label: "PCF Factor"
                            value: 3; from: 0; to: 30; stepSize: 1
                            accentColor: root.clPurple
                        }
                    }

                    SectionHeader { id: hdrCamera; title: "Camera"; accent: root.clBlue }

                    ColumnLayout {
                        visible: hdrCamera.expanded
                        Layout.fillWidth: true; Layout.bottomMargin: 6; spacing: 0

                        SliderRow {
                            id: sliderCameraClipFar
                            label: "Clip Far"
                            value: 4000; from: 0; to: 30000; stepSize: 1000
                            accentColor: root.clBlue
                        }
                    }

                    SectionSep {}

                    Item { Layout.minimumHeight: 16 }
                }
            }
        }
    }
}
