{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/building-blocks/button/button-macros.njk" as button %}
{% import "general/components/circles/circles-macros.njk" as circles %}
{% import "general/building-blocks/input/input-macros.njk" as input %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<section class="c-highlight l-section {{classes}}">
		<div class="c-highlight__content l-container">
			<h2 class="c-highlight__title">{{data.title}}</h2>

			<div class="c-highlight__info">
				{% if data.text %}
					<p class="c-highlight__text">{{data.text | safe }}</p>
				{% endif %}

				{% if data.cta %}
					{{button.default("c-highlight__button " + data.cta.class, {
						text: data.cta.text
					})}}
				{% endif %}
			</div>

			<form class="c-highlight__form">
				{% if data.items %}
					<div class="c-highlight__input-container">
						{% for item in data.items %}
							{{input.default("c-highlight__input " + item.class, item)}}
						{% endfor %}
					</div>
				{% endif %}

				{% if data.submit %}
					{{button.default("c-highlight__button " + data.submit.class, {
						text: data.submit.text
					})}}
				{% endif %}
			</form>
		</div>

		<div class="c-highlight__background-container">
			{{circles.default("c-highlight__background")}}
		</div>
	</section>

{% endmacro %}


{# ========================================================================== #}
{# :: Alternative #}
{# ========================================================================== #}
{% macro alternative(classes, data) %}

	<section class="c-highlight c-highlight--alternative l-section l-section--background-pink {{classes}}">
		<div class="c-highlight__content l-container">
			<div class="l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="l-grid__col l-grid__col--7@desktop">
					<h2 class="c-highlight__title">{{data.title}}</h2>

					<div class="c-highlight__info">
						{% if data.text %}
							<p class="c-highlight__text">{{data.text | safe }}</p>
						{% endif %}

						{% if data.cta %}
							{{button.default("c-highlight__button " + data.cta.class, {
								text: data.cta.text
							})}}
						{% endif %}
					</div>
				</div>

				<form class="c-highlight__form l-grid__col l-grid__col--4@desktop l-grid__col--offset-1@desktop u-margin-top-8x@below-desktop">
					<div class="c-highlight__input-container">
						{% for item in data.items %}
							{{input.default("c-highlight__input " + item.class, item)}}
						{% endfor %}
					</div>

					{{button.default("c-highlight__button " + data.submit.class, {
						text: data.submit.text
					})}}
				</form>
			</div>
		</div>

		<div class="c-highlight__background-container">
			{{circles.default("c-highlight__background")}}
		</div>
	</section>

{% endmacro %}