- scroller:
    name: "backgroundShading"
    title: "Background Shading"
    content:

      - imageHeader:
          name: imageHeader
          image: /assets/line_chart/Q5_AddBackgroundShading.png
          text: >
            <p><b><u>Inputs:</u></b> Background Shading</p>


      # Workflow OW4: User Input Table. The below table is similar to the one we used on the Panel 2: Initial Inputs.
      - table:
          name: shadingPeriodTable
          columns:
            # Workflow OW4(a)
            - "#":
                name: "#"
                type: number
                dataIndex: id
            # Workflow OW4(b)
            - Label:
                name: Label
                type: String
                dataIndex: label
            # Workflow OW4(c)
            - Date (Bgn -> End):
                name: Date
                type: string
                dataIndex: dateRange
            - Remove: # New delete button column
                name: removeCompany
                type: button
                dataIndex: id  # Use the row's ID to identify deletion target
                iconType: CloseOutlined  # Icon for the button

      # Workflow OW4(d)
      # Workflow OW4(e)
      - aligner:
          align: right
          width: auto
          content:
            - button:
                name: addShadingPeriodTableRow
                type: primary
                title: Add Shading Period
                style:
                  marginTop: "10px"
                  backgroundColor: "#FFC000"


      - aligner:
          align: right
          width: auto
          content:
            - button:
                name: backBtn
                type: default
                title: Back
            # Workflow NN2
            - button:
                name: nextBtn
                type: primary
                title: Next
            # Workflow NN1
            - button:
                name: btnCancel
                type: default
                title: Cancel