{% spaceless %}
	{% filter mjmlCli %}
<mjml>
	<mj-head>
		<mj-title>{{ craft.formie.getParsedValue(notification.subject, submission, submission.form) }}</mj-title>
		<mj-attributes>
			<mj-all font-family="Arial, sans-serif"></mj-all>
			<mj-text font-weight="400" font-size="14px" color="#1F2937" line-height="24px" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif"></mj-text>
		</mj-attributes>
		<mj-style inline="inline">
			.body-section {
				-webkit-box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
				-moz-box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
				box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
			}
			.body-section a {
				color: #1F2937;
				font-weight: bold;
				text-decoration: underline;
			}
			.footer-link {
				color: #1F2937;
			}
		</mj-style>

	</mj-head>
	<mj-body background-color="#E5E7EB" width="800px">

		<mj-spacer height="20px" />

		<mj-section>
			<mj-column width="100%">
				<mj-image src="{{ siteUrl }}/dist/images/email-logo.png" alt="{{ siteName }}" align="center" width="115px" />
			</mj-column>
		</mj-section>

		<mj-wrapper padding-top="0" padding-bottom="0" css-class="body-section">

			<mj-section background-color="#ffffff" padding-left="15px" padding-right="15px">
				<mj-column width="100%">
					<mj-text color="#1F2937" font-weight="bold" font-size="20px">
						{{ craft.formie.getParsedValue(notification.subject, submission, submission.form) }}
					</mj-text>
				</mj-column>
			</mj-section>

			<mj-section background-color="#ffffff" padding-top="0px" padding-bottom="0px" padding-left="15px" padding-right="15px">
				<mj-column width="100%">
					<mj-divider border-width="1px" border-color="#cecece"></mj-divider>
				</mj-column>
			</mj-section>

			{% block content %}

				<mj-section background-color="#ffffff" padding-top="0px" padding-bottom="0px" padding-left="15px" padding-right="15px">
					<mj-column width="100%">
						<mj-text color="#1F2937" font-size="14px">
							{{ contentHtml }}
						</mj-text>
						<mj-spacer height="20px" />
					</mj-column>
				</mj-section>

			{% endblock %}

		</mj-wrapper>

		<mj-wrapper full-width="full-width">
			<mj-section>
				<mj-column width="100%" padding="0">
					<mj-text color="#1F2937" font-size="11px" align="center" line-height="14px">
						&copy; {{ now|date('Y') }} {{ siteName }}
					</mj-text>
				</mj-column>
			</mj-section>
			<mj-section padding-top="0">
				<mj-group>
					<mj-column width="100%" padding-right="0">
						<mj-text color="#1F2937" font-size="11px" align="center" line-height="14px" font-weight="bold">
							<mj-raw>
								{% set globalFooter = craft.globalSets().handle('globalFooter').siteId(1).one() %}
								{% set globalFooterLinks = globalFooter.footerLinks.all()|map( i => {
									url: i.linkField.url|default,
									text: i.linkField.text|default,
								}) %}
								{% for item in globalFooterLinks %}
									<a class="footer-link" href="{{ item.url }}">{{ item.text }}</a>{% if not loop.last %}&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;{% endif %}
								{% endfor %}
							</mj-raw>
						</mj-text>
					</mj-column>
				</mj-group>

			</mj-section>
		</mj-wrapper>

	</mj-body>
</mjml>

	{% endfilter %}
{% endspaceless %}