-- ftd.color green: green
dark: green

-- ftd.color red: red
dark: red

-- ftd.color blue: blue
dark: blue

-- ftd.color grey: grey
dark: grey

-- ftd.color orange: orange
dark: orange

-- boolean iphone: false

-- boolean android: false

-- ftd.column iphone-display:
optional string id:
id: $id
color: $green
open: true
append-at: iphone-id

--- ftd.text: iPhone Display

--- ftd.column:
id: iphone-id
if: $iphone

-- ftd.column desktop-display:
optional string id:
id: $id
color: $red

--- ftd.text: Desktop Display

-- ftd.column android-display:
optional string id:
id: $id
color: $blue
open: true
append-at: android-id

--- ftd.text: Android Display

--- ftd.column:
id: android-id
if: $android

-- boolean mobile: true

-- ftd.column foo:
open: true
append-at: some-child
padding-left: 20
id: foo

--- iphone-display:
if: $mobile
id: some-child

--- container: ftd.main

--- android-display:
if: $mobile
id: some-child

--- container: ftd.main

--- desktop-display:
if: not $mobile
id: some-child

-- ftd.column parent:
string id:
caption name:
id: $id
width: fill
open: true
padding-left: 10

--- ftd.text:
text: $name
color: $grey

-- ftd.column items:
caption name:
string price:
string bio:
color: $orange

--- parent:
id: /welcome/
name: $name

--- parent:
id: /Building/
name: $price

--- parent:
id: /ChildBuilding/
name: Awesome Mobile

--- container: /welcome/

--- parent:
id: /Building2/
name: $bio



-- ftd.text: Start Display

-- ftd.column:
id: hello
padding-left: 20

-- ftd.text: Show Room

-- ftd.column:
id: kk
padding-left: 30

-- ftd.text: Welcome!!

-- foo:

-- items: Mobile 1
price: Rs. 340
bio: Good Mobile 1

-- items: Mobile 2
price: Rs. 350
bio: Good Mobile 2

-- container: ftd.main

-- ftd.text: end of display

-- ftd.text: Click here!
$on-click$: toggle $mobile

-- ftd.text: Click here Android!
$on-click$: toggle $android

-- ftd.text: Click here iPhone!
$on-click$: toggle $iphone