kind: Solution
version: v0
router:
  kind: Router
  routes:
    - frame: my-root-frame
      children:
        - frame: my-overview-frame
        - frame: my-config-frame
frames:
  my-root-frame:
    kind: Frame
    contents:
      my-entity-datastore:
        kind: EntityDataStore
        persistToStore: my-store
        properties:
          project-name:
            type: String
            default: ""
            nullable: false
          height:
            type: Number
            default: 5
        subscribe:
          - kind: EntityTable
            frame: my-overview-frame
            source: my-entity-table
            selectOn:
              - edit-button
          - kind: ControlPanel
            frame: my-config-frame
            source: my-controlpanel
            action: Update
          - kind: ControlPanel
            frame: my-add-new-frame
            source: my-add-new-controlpanel
            action: Insert
      my-outlet:
        kind: RouterOutlet
  my-overview-frame:
    kind: Frame
    layout:
      kind: GridLayout
      heights:
        - auto
        - 1fr
      widthGap: 10px
      heightGap: 10px
      areas:
        - ["","", my-add-button,""]
        - ["",my-entity-table, my-entity-table,""]
      widths:
        - 10px
        - 1fr
        - auto
        - 10px
    contents:
      my-add-button:
        kind: Button
        text: Add new project
      my-entity-table:
        kind: EntityTable
        columns:
          project-name:
            kind: Text
            label: Project name
          height:
            kind: Text
            label: Height
          edit-button:
            kind: Button
            label: Edit
            routerLink: /my-root-frame/my-config-frame
            icon:
              kind: MaterialIcon
              name: edit
        subscribe:
          - kind: EntityDataStore
            frame: my-root-frame
            source: my-entity-datastore
      my-add-new-popup:
        kind: PopupOutlet
        frame: my-add-new-frame
        subscribe:
          - kind: Button
            frame: my-overview-frame
            source: my-add-button
            action: open
          - kind: ControlPanel
            frame: my-add-new-frame
            source: my-add-new-controlpanel
            action: close
  my-config-frame:
    kind: Frame
    layout:
      kind: GridLayout
      widths:
        - 1fr
        - 300px
      heights:
        - 1fr
        - 100px
      areas:
        - [my-viewer, my-controlpanel]
        - [my-viewer, my-back-button]
    contents:
      my-model:
        kind: Model
        modelFile: example.gh
        subscribe:
          - kind: EntityDataStore
            frame: my-root-frame
            source: my-entity-datastore
      my-viewer:
        kind: Viewer
        settings:
          kind: BasicSettings
          grid: false
          shadows: false
          size: 50
        materials:
          blue:
            kind: StandardMaterial
            color: [42, 75, 240]
          light-blue:
            kind: StandardMaterial
            color: [119, 173, 238]
        subscribe:
          - kind: Model
            source: my-model
            frame: my-config-frame
            assignMaterials:
              box: blue
              sphere: light-blue
      my-controlpanel:
        kind: ControlPanel
        controls:
          title:
            kind: Text
            text: My control panel
            color: primary
            weight: bold
            type: h3
          height:
            kind: Slider
            label: Height
            value: 10
            min: 1
            max: 20
            precision: 0
        subscribe:
          - kind: EntityDataStore
            frame: my-root-frame
            source: my-entity-datastore
      my-back-button:
        kind: Button
        text: Back to project overview
        routerLink: /my-root-frame/my-overview-frame
  my-add-new-frame:
    kind: Frame
    layout:
      kind: GridLayout
      heights:
        - 10px
        - 1fr
        - 10px
      areas:
        - ["","",""]
        - ["",my-add-new-controlpanel,""]
        - ["","",""]
      widths:
        - 10px
        - 1fr
        - 10px
    contents:
      my-add-new-controlpanel:
        kind: ControlPanel
        controls:
          project-name:
            kind: TextInput
            label: Project name
          submit-button:
            kind: SubmitButton
            text: Add project
