323 lines
17 KiB
HTML
323 lines
17 KiB
HTML
<f:if condition="{width}">
|
|
<f:else>
|
|
<f:variable name="width" value="640" />
|
|
</f:else>
|
|
</f:if>
|
|
<f:if condition="{padding}">
|
|
<f:else>
|
|
<f:variable name="padding" value="20" />
|
|
</f:else>
|
|
</f:if>
|
|
<f:if condition="{buttonColor}">
|
|
<f:else>
|
|
<f:variable name="buttonColor" value="#ffffff" />
|
|
</f:else>
|
|
</f:if>
|
|
<f:if condition="{buttonBackgroundcolor}">
|
|
<f:else>
|
|
<f:variable name="buttonBackgroundcolor" value="#8ABF6F" />
|
|
</f:else>
|
|
</f:if>
|
|
<f:variable name="widthPadded" value="{width - padding - padding}" />
|
|
<f:variable name="widthTableColumn" value="{widthPadded / 2}" />
|
|
|
|
<f:for each="{content}" as="row" key="rowKey" iteration="rowI" >
|
|
<v:condition.type.isArray value="{row.data}">
|
|
<f:else>
|
|
<f:if condition="{row.type} == 'contentBlockHtml'">
|
|
{row.data -> f:format.raw()}
|
|
</f:if>
|
|
<f:if condition="{v:condition.string.contains(haystack: '{row.type}', needle: 'headline', then: '1')}
|
|
|| {row.type} == 'text'
|
|
|| {row.type} == 'button'
|
|
|| {row.type} == 'buttonleft'
|
|
|| {row.type} == 'buttoncenter'
|
|
|| {row.type} == 'buttonright'
|
|
|| {row.type} == 'divider'
|
|
|| {row.type} == 'hr'
|
|
">
|
|
<!--[if mso | IE]>
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:{width}px;" width="{width}" >
|
|
<tr>
|
|
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
|
|
<![endif]-->
|
|
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:{width}px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="direction:ltr;font-size:0px;padding:0 {padding}px;text-align:center;">
|
|
<!--[if mso | IE]>
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td class="" style="vertical-align:top;width:{widthPadded};" >
|
|
<![endif]-->
|
|
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<f:switch expression="{row.type}">
|
|
<f:case value="divider">
|
|
<f:variable name='paddingTd' value='20px 0' />
|
|
</f:case>
|
|
<f:defaultCase>
|
|
<f:variable name='paddingTd' value='0' />
|
|
</f:defaultCase>
|
|
</f:switch>
|
|
<td style="vertical-align:top;padding:0;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
|
|
<tr>
|
|
<f:switch expression="{row.type}">
|
|
<f:case value="buttonright">
|
|
<f:variable name='align' value='right' />
|
|
</f:case>
|
|
<f:case value="buttoncenter">
|
|
<f:variable name='align' value='center' />
|
|
</f:case>
|
|
<f:defaultCase>
|
|
<f:variable name='align' value='left' />
|
|
</f:defaultCase>
|
|
</f:switch>
|
|
<td align="{align}" style="font-size:0px;padding:{paddingTd};word-break:break-word;">
|
|
<div style="font-family:Arial, sans-serif;font-size:16px;line-height:1.4;text-align:{align};color:#000000;">
|
|
<f:switch expression="{row.type}">
|
|
<f:case value="headline">
|
|
<h1>{row.data -> f:format.nl2br() -> f:format.raw()}</h1>
|
|
</f:case>
|
|
<f:case value="headline2">
|
|
<h2>{row.data -> f:format.nl2br() -> f:format.raw()}</h2>
|
|
</f:case>
|
|
<f:case value="headline3">
|
|
<h3>{row.data -> f:format.nl2br() -> f:format.raw()}</h3>
|
|
</f:case>
|
|
<f:case value="button">
|
|
<span style="display: inline-block;" class="buttonwrapper">
|
|
{row.data -> f:format.nl2br() -> f:format.raw()}
|
|
</span>
|
|
</f:case>
|
|
<f:case value="buttonleft">
|
|
<span style="display: inline-block;" class="buttonwrapper">
|
|
{row.data -> f:format.nl2br() -> f:format.raw()}
|
|
</span>
|
|
</f:case>
|
|
<f:case value="buttoncenter">
|
|
<span style="display: inline-block;" class="buttonwrapper">
|
|
<f:variable name="rowData">{row.data -> v:format.json.decode()}</f:variable>
|
|
<a style="display: inline-block; color: {buttonColor}" target="_blank" href="{rowData.0}">
|
|
<span style="display: inline-block; padding: 10px 15px; border-radius: 3px; background-color: {buttonBackgroundcolor};">
|
|
{rowData.1}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</f:case>
|
|
<f:case value="buttonright">
|
|
<span style="display: inline-block;" class="buttonwrapper">
|
|
{row.data -> f:format.nl2br() -> f:format.raw()}
|
|
</span>
|
|
</f:case>
|
|
<f:case value="hr">
|
|
<p style="border-top:solid 1px #bababa;font-size:1px;margin:13px auto;width:100%;">
|
|
</p>
|
|
<!--[if mso | IE]>
|
|
|
|
<table
|
|
align="center"
|
|
border="0"
|
|
cellpadding="0"
|
|
cellspacing="0"
|
|
style="border-top:solid 1px #bababa;font-size:1px;margin:13px auto;width:100%;"
|
|
role="presentation"
|
|
width="550px"
|
|
>
|
|
<tr>
|
|
<td style="height:0;line-height:0;">
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<![endif]-->
|
|
</f:case>
|
|
<f:case value="divider">
|
|
<p style="border-top:solid 2px #025093;font-size:1px;margin:0px auto;width:100%;">
|
|
</p>
|
|
<!--[if mso | IE]>
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 2px #025093;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" >
|
|
<tr><td style="height:0;line-height:0;"> </td></tr>
|
|
</table>
|
|
<![endif]-->
|
|
</f:case>
|
|
<f:defaultCase>
|
|
<p>{row.data -> f:format.nl2br() -> f:format.raw()}</p>
|
|
</f:defaultCase>
|
|
</f:switch>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</f:if>
|
|
</f:else>
|
|
<f:then>
|
|
<f:comment>Data is array, can be table or list</f:comment>
|
|
<f:switch expression="{row.type}">
|
|
<f:case value="table">
|
|
<f:variable name="type" value="table" />
|
|
</f:case>
|
|
<f:case value="tablelr">
|
|
<f:variable name="type" value="table" />
|
|
</f:case>
|
|
<f:case value="tableLayout">
|
|
<f:variable name="type" value="table" />
|
|
</f:case>
|
|
<f:defaultCase>
|
|
<f:variable name="type" value="list" />
|
|
</f:defaultCase>
|
|
</f:switch>
|
|
<f:switch expression="{type}">
|
|
<f:case value="table">
|
|
<!--[if mso | IE]>
|
|
<table
|
|
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:{width}px;" width="{width}"
|
|
>
|
|
<tr>
|
|
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
|
|
<![endif]-->
|
|
<div style="background:#ffffff;background-color:#ffffff;Margin:0px auto;max-width:{width}px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="direction:ltr;font-size:0px;padding:2px {padding - 4}px;text-align:center;vertical-align:top;">
|
|
<!--[if mso | IE]>
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td class="" style="vertical-align:top;width:{widthTableColumn}px;" >
|
|
<![endif]-->
|
|
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
|
|
<tr>
|
|
<td align="left" style="font-size:0px;padding:0px 4px;word-break:break-word;">
|
|
<div style="font-family:Arial, sans-serif;font-size:16px;line-height:1.4;text-align:left;color:#000000;">
|
|
<div>{row.data.0 -> f:format.nl2br() -> f:format.raw()}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]>
|
|
</td>
|
|
<td class="" style="vertical-align:top;width:{widthTableColumn}px;">
|
|
<![endif]-->
|
|
<f:switch expression="{row.type}">
|
|
<f:case value="tablelr">
|
|
<f:variable name="align" value="right" />
|
|
</f:case>
|
|
<f:defaultCase>
|
|
<f:variable name="align" value="left" />
|
|
</f:defaultCase>
|
|
</f:switch>
|
|
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:{align};direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
|
|
<tr>
|
|
<td align="{align}" style="font-size:0px;padding:0px 4px;word-break:break-word;">
|
|
<div style="font-family:Arial, sans-serif;font-size:16px;line-height:1.4;text-align:{align};color:#000000;">
|
|
<div>{row.data.1 -> f:format.nl2br() -> f:format.raw()}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</f:case>
|
|
<f:case value="list">
|
|
<!--[if mso | IE]>
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:{width}px;" width="{width}" >
|
|
<tr>
|
|
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
|
|
<![endif]-->
|
|
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:{width}px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="direction:ltr;font-size:0px;padding:0 {padding - 4}px;text-align:center;">
|
|
<!--[if mso | IE]>
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td class="" style="vertical-align:top;width:{widthPadded};" >
|
|
<![endif]-->
|
|
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td style="vertical-align:top;padding:0;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
|
|
<tr>
|
|
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
|
|
<div style="font-family:Arial, sans-serif;font-size:16px;line-height:1.4;text-align:left;color:#000000;">
|
|
<ul style="padding-left: 14px;">
|
|
<f:for each="{row.data}" as="dataRow" key="dataRowKey" iteration="dataRowI">
|
|
<li>{dataRow -> f:format.nl2br() -> f:format.raw()}</li>
|
|
</f:for>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</f:case>
|
|
</f:switch>
|
|
</f:then>
|
|
</v:condition.type.isArray>
|
|
</f:for>
|