# Dynamic Expressions

### How to use variables in layouts ? <a href="#how-to-use-variables-in-layouts" id="how-to-use-variables-in-layouts"></a>

You must always precede the name of your variable with "page.".

```html
<div>Your name {{ page.variables }}</div>
```

### Conditionals <a href="#conditionals" id="conditionals"></a>

```html
<if condition="page.firstname">
  <div>Hello {{ page.firstname }}</div>
</if>
```

```html
<if condition="page.firstname === 'John'">
  <div>Hello John</div>
</if>
<elseif condition="page.firstname === 'Joe'">
  <div>Hello Joe</div>
</elseif>
<else>
    <div>Hello</div>
</else>
```

### Loops <a href="#loops" id="loops"></a>

#### Arrays <a href="#arrays" id="arrays"></a>

```html
<each loop="item, index in page.myArray">
  <p>{{ index }}: {{ item }}</p>
</each>
```

#### Objects <a href="#objects" id="objects"></a>

```html
<each loop="value, key in page.myObject">
  <p>{{ key }}: {{ value }}</p>
</each>
```

#### Loop props <a href="#loop-props" id="loop-props"></a>

While inside a loop, you will have access to a special object called `{{ loop }}`. This object provides you with valuable information about the current loop iteration.

* `loop.index` - the current iteration of the loop (0 indexed)
* `loop.remaining` - number of iterations until the end (0 indexed)
* `loop.first` - boolean indicating if it's the first iteration
* `loop.last` - boolean indicating if it's the last iteration
* `loop.length` - total number of items

### Switches <a href="#switchs" id="switchs"></a>

```html
<switch expression="page.user.role">
  <case n="'admin'">
    <p>Welcome, admin! You have full access to all features.</p>
  </case>
  <case n="'editor'">
    <p>Welcome, editor! You can create and edit content on the platform.</p>
  </case>
  <case n="'subscriber'">
    <p>Welcome, subscriber! Enjoy exclusive content and updates.</p>
  </case>
  <default>
    <p>Welcome, guest! Sign up or log in to access more features.</p>
  </default>
</switch>
```

### Fetch <a href="#fetch" id="fetch"></a>

```html
<fetch url="https://jsonplaceholder.typicode.com/users">
  <each loop="user in res">
    {{ user.name }}
  </each>
</fetch>
```

### Raw <a href="#raw" id="raw"></a>

If you want to ignore expressions in a block of code

```html
<raw>
  This will not be parsed:
  <if condition="page.env">
    {{ page.env }}
  </if>
  Neither will this expression: {{ page.env }}
</raw>
```