{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 38
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Logo"
        },
        "position": {
          "basis": "120px",
          "shrink": 0
        },
        "props": {
          "path": "Components/Atoms/Logo",
          "style": {
            "marginLeft": "var(--space-md)",
            "marginRight": "var(--space-md)",
            "padding": "8px"
          }
        },
        "type": "ia.display.view"
      },
      {
        "children": [
          {
            "meta": {
              "name": "Title"
            },
            "position": {
              "grow": 1
            },
            "props": {
              "style": {
                "backgroundColor": "#6A959530",
                "color": "var(--call-to-action)",
                "textAlign": "center"
              },
              "text": "Layout"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "selected"
            },
            "position": {
              "basis": "var(--space-xs)"
            },
            "props": {
              "style": {
                "backgroundColor": "var(--call-to-action)"
              }
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "Option_01"
        },
        "position": {
          "basis": "104px",
          "shrink": 0
        },
        "props": {
          "direction": "column"
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "meta": {
              "name": "Title"
            },
            "position": {
              "grow": 1
            },
            "props": {
              "style": {
                "backgroundColor": "transparent",
                "color": "var(--call-to-action)",
                "textAlign": "center"
              },
              "text": "Alarms"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "selected"
            },
            "position": {
              "basis": "var(--space-xs)"
            },
            "props": {
              "style": {
                "backgroundColor": "transparent"
              }
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "Option_02"
        },
        "position": {
          "basis": "104px",
          "shrink": 0
        },
        "props": {
          "direction": "column"
        },
        "type": "ia.container.flex"
      },
      {
        "meta": {
          "name": "spacer"
        },
        "position": {
          "basis": "80%"
        },
        "type": "ia.display.label"
      },
      {
        "children": [
          {
            "events": {
              "dom": {
                "onClick": [
                  {
                    "config": {},
                    "enabled": false,
                    "scope": "C",
                    "type": "login"
                  },
                  {
                    "config": {
                      "script": "\tif self.session.props.auth.authenticated:\n\t\tsystem.perspective.logout()\n\telse:\n\t\tsystem.perspective.login()"
                    },
                    "scope": "G",
                    "type": "script"
                  }
                ]
              }
            },
            "meta": {
              "name": "Icon"
            },
            "position": {
              "basis": "30px"
            },
            "propConfig": {
              "props.path": {
                "binding": {
                  "config": {
                    "path": "session.props.auth.authenticated"
                  },
                  "transforms": [
                    {
                      "fallback": "material/login",
                      "inputType": "scalar",
                      "mappings": [
                        {
                          "input": true,
                          "output": "material/person_outline"
                        },
                        {
                          "input": false,
                          "output": "material/login"
                        }
                      ],
                      "outputType": "scalar",
                      "type": "map"
                    }
                  ],
                  "type": "property"
                }
              }
            },
            "props": {
              "color": "var(--text-color)"
            },
            "type": "ia.display.icon"
          },
          {
            "events": {
              "dom": {
                "onClick": [
                  {
                    "config": {},
                    "enabled": false,
                    "scope": "C",
                    "type": "login"
                  },
                  {
                    "config": {
                      "script": "\tif self.session.props.auth.authenticated:\n\t\tsystem.perspective.logout()\n\telse:\n\t\tsystem.perspective.login()"
                    },
                    "scope": "G",
                    "type": "script"
                  }
                ]
              }
            },
            "meta": {
              "name": "Button"
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "config": {
                    "path": "session.props.auth.authenticated"
                  },
                  "transforms": [
                    {
                      "fallback": "\"Login\"",
                      "inputType": "scalar",
                      "mappings": [
                        {
                          "input": true,
                          "output": "{session.props.auth.user.userName}"
                        },
                        {
                          "input": false,
                          "output": "\"Login\""
                        }
                      ],
                      "outputType": "expression",
                      "type": "map"
                    }
                  ],
                  "type": "property"
                }
              }
            },
            "props": {
              "textStyle": {
                "color": "var(--text-color)"
              }
            },
            "type": "ia.input.button"
          }
        ],
        "meta": {
          "name": "Controls"
        },
        "position": {
          "basis": "250px"
        },
        "props": {
          "justify": "flex-end",
          "style": {
            "gap": "var(--space-xs)",
            "marginLeft": "var(--space-md)",
            "marginRight": "var(--space-md)"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "style": {
        "backgroundColor": "var(--container-root)",
        "outlineColor": "#CF1F1F",
        "outlineStyle": "solid",
        "outlineWidth": "2",
        "overflow": "visible"
      }
    },
    "type": "ia.container.flex"
  }
}