## Letter Templates

### Filename

All letters are in folder `/content/$CATEGORY`
All the letters that need to be done are in `static/letters`

Each letter filename must be with `md` extenstion and filename in `dash-case` - For example: `my-letter` will generate a path `/my-letter`

### YAML Front matter block

Each letter begins with a YAML front matter block. For more information - [documentation](https://content.nuxtjs.org/writing)

You can find and example with all the fields you can do for now in `content/$CATEGORY/letter-example.md`

`title` - The title of the letter
`categories` - Array of categories that the letter will show - see `/content/categories.json`
`fields` - Object containing all the editable fields inside the letter. Each field must have a unique `id` that must be the same as the key object.

Each field must have:

- id `String`
- fields `Object`
- id `String`
- id `String`
- label `String`
- formTitle `String`
- formTags `Array`
- `Object`
- type: `text, email, number, tel, select, textarea, toggle, date`
- label: `String`
- fullWidth: `Boolean` - optional, default is `false`
- options: `Array` - only if `type` is `select`

### Content Block

The content block of the letter contains the letter content and the placeholders for each field from the YAML Front matter block.

You can find and example how to write content in `content/$CATEGORY/letter-example.md`
You can use html or markdown.

#### Components

**`letter-field`:**

In the place of each field inside the letter you must include a component `<letter-field :field="fields.ID_OF_THE_FIELD"></letter-field>` where `ID_OF_THE_FIELD` must be the same as the object key in `fields`.

**`conditional-content`**

In some letters there is content that is conditional. For example inside the letter there is something like: "Include this text only if ..." and after a block with the "conditional text".

This "conditional text" can be toggled with a formTag with a type: `toggle`.

Inside the letter you can include this conditional text inside the `conditional-content` component.

Example:

<conditional-content :condition="fields.f2.formTags[0]">
	<p>This is text that will be shown if the fields.f2.formTags[0] is checked</p>
</conditional-content>

Where `fields.f2.formTags[0]` means that this tag must be checked if you want the conditional block to appear.

**Warning:** Only use formtags with `type` `toggle` as a single formtag.