-- import: ft

-- ftd.color grey: grey
dark: grey

-- ftd.color green: green
dark: green

-- ftd.color red: red
dark: red

-- ftd.color blue: blue
dark: blue

-- ft.h0: Conditional Attributes

`ftd` supports `if` expression to decide the value of attribute, based on the
arguments, or global variables.

-- ft.h2: Priority Order

The priority of conditional attributes is in increasing order (low -> high) i.e.
the condition at bottom has higher priority than the above conditions. The value of
attribute with no condition is taken as default.

-- ft.h2: Examples

Lets understand it better with few examples

-- ft.h4: Example 1:

-- ft.code: Conditional Attribute using variable
lang: ftd

\-- boolean present: false

\-- ftd.text foo:
caption name:
color: grey
color if $present: green
color if not $present: red
text: $name

\-- foo: hello

-- ftd.text:
color: $grey

Output:

-- container: ftd.main

-- ftd.row:
border-width: 1
border-color: $grey
padding: 10
width: fill

-- boolean present: false

-- ftd.text foo1:
caption name:
color: $grey
color if $present: $green
color if not $present: $red
text: $name

-- foo1: hello

-- container: ftd.main

-- ft.markdown:

Here, in above sample code, the attribute or style `color` has default value as
`grey` and it follows the conditional statements. According to the value of the
variable `present` (in this case, it is `false`), the value of the style `color`
is set (in this case, it's `red`).

-- ft.h4: Example 2:

-- ft.code: Conditional Attribute with default
lang: ftd

\-- boolean present: false

\-- ftd.text foo:
caption name:
color: grey
color if $present: green
text: $name

\-- foo: hello

-- ftd.text:
color: $grey

Output:

-- container: ftd.main

-- ftd.row:
border-width: 1
border-color: $grey
padding: 10
width: fill

-- ftd.text foo2:
caption name:
color: $grey
color if $present: $green
text: $name

-- foo2: hello

-- container: ftd.main

-- ft.markdown:

Here, in above sample code, no conditional statement is satisfied, so the value of
style `color` is set to its default value (i.e. `grey`).

-- ft.h4: Example 3:

-- ft.code: Conditional Attribute using arguments
lang: ftd

\-- ftd.text foo:
caption name:
optional string yes:
color: grey
color if $yes is not null: blue
text: $name

\-- foo: hello
yes: world

-- ftd.text:
color: $grey

Output:

-- container: ftd.main

-- ftd.row:
border-width: 1
border-color: $grey
padding: 10
width: fill

-- ftd.text foo3:
caption name:
optional string yes:
color: $grey
color if $yes is not null: $blue
text: $name

-- foo3: hello
yes: world

-- container: ftd.main

-- ft.markdown:

Here, in above sample code, we have defined the argument `yes` of optional string type.
if `yes` is passed then `color if $yes is not null` condition would be satisfied and
the `color` gets set to `blue`.

-- ft.h4: Example 4:

-- ft.code: Conditional Attribute deciding priority
lang: ftd

\-- boolean present: false

\-- ftd.text foo:
caption name:
optional string yes:
color: grey
color if $present: blue
color if not $present: red
color if $yes is not null: green
text: $name

\-- foo: hello
yes: world

-- ftd.text:
color: $grey

Output:

-- container: ftd.main

-- ftd.row:
border-width: 1
border-color: $grey
padding: 10
width: fill

-- ftd.text foo4:
caption name:
optional string yes:
color: $grey
color if $present: $blue
color if not $present: $red
color if $yes is not null: $green
text: $name

-- foo4: hello
yes: world

-- container: ftd.main

-- ft.markdown:

Here, in above sample code, both `color if not $present: red` and
`color if $yes is not null: blue` are satisfied, so according to the precedence rule,
the value of attribute/style is set to value in last satisfied condition, i.e.,
`color if $yes is not null: blue` has highest priority. So the `color` gets set to `blue`.