{# ========================================================================== #}
{# :: Private macros #}
{# ========================================================================== #}
{% macro _subtitle(subtitle, classes) %}
	<div class="l-grid__col l-grid__col--12 {{classes}}">
		<div class="l-form__subtitle">
			{{subtitle | safe}}
		</div>
	</div>
{% endmacro %}

{% macro _formfield(classes,item)%}

	{{formfield.default(classes, {
		name: item.name,
		id: item.id,
		text: item.text,
		type: item.type,
		checked: item.checked,
		link:item.link,
		options:item.options
	})}}

{% endmacro %}

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

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

	{% set formfieldClasses = "l-grid__col l-grid__col--12" %}

	{% if data.options.length > 1 %}
		{% set formfieldClasses = formfieldClasses +" l-grid__col--6@tablet" %}
	{% endif %}

	<fieldset class="l-form__fieldset c-formfieldset {{classes}}">
		<div class="l-grid l-grid--with-spacing l-grid--align-middle">

			{{_subtitle(data.question,"l-grid__col--5@desktop")}}

			<div class="l-grid__col l-grid__col--7@desktop">

				<div class="l-grid l-grid--with-spacing l-grid--align-middle">

					{% for item in data.options %}
						{{_formfield("c-formfield__item " + formfieldClasses, item)}}
					{% endfor %}

				</div>

			</div>

		</div>
	</fieldset>

{% endmacro %}

{% macro yesNoRadio(classes, data) %}

	<fieldset class="l-form__fieldset c-formfieldset {{classes}}">
		<div class="l-grid l-grid--with-spacing l-grid--align-middle">

			{{_subtitle(data.question,"l-grid__col--5@desktop")}}

			<div class="l-grid__col l-grid__col--7@desktop ">

				<div class="l-grid l-grid--with-spacing l-grid--align-middle">

					{% for item in data.options %}
						{{_formfield("c-formfield__item l-grid__col--2", item)}}
					{% endfor %}

				</div>

			</div>
		</div>
	</fieldset>

{% endmacro %}

{% macro buttonrow(classes, data) %}

	<fieldset class="l-form__fieldset c-formfieldset {{classes}}">
		<div class="l-grid l-grid--with-spacing l-grid--align-middle">

			{{_subtitle(data.question,"l-grid__col--2@desktop")}}

			<div class="l-grid__col l-grid__col--10@desktop">

				<div class="l-grid l-grid--with-spacing l-grid--align-middle">
					{% for item in data.options %}
						{{_formfield("l-grid__col l-grid__col--4 l-grid__col--2@desktop c-formfield__item", item)}}
					{% endfor %}
				</div>

			</div>
		</div>
	</fieldset>

{% endmacro %}

{% macro footnote(classes, data) %}

	<fieldset class="l-grid l-form__fieldset c-formfieldset {{classes}}">
		<div class="l-grid__col c-pop-up__footnote {{data.classes}}">

			<span>{{data.text}}</span>

			{% if data.result %}
				<span class="c-pop-up__footnote-result">{{data.result}}</span>
			{% endif %}

		</div>
	</fieldset>
{% endmacro %}

{% macro combined(classes, data) %}

	<fieldset class="l-form__fieldset c-formfieldset {{classes}}">
		<div class="l-grid l-grid--with-spacing l-grid--align-middle">

			{{_subtitle(data.question,"l-grid__col--5@desktop")}}

			<div class="l-grid__col l-grid__col--7@desktop">

				<div class="l-grid l-grid--with-spacing l-grid--align-middle">

						{{_formfield("l-grid__col l-grid__col--6@desktop", data.input)}}

						{% if data.select %}
							{{formfield.select("c-formfield--select-alternative l-grid__col l-grid__col--6@desktop", data.select)}}
						{% endif %}

						{% if data.link %}

							{{link.default("l-grid__col l-grid__col--6@desktop", data.link)}}

						{% endif %}

				</div>

			</div>

		</div>
	</fieldset>

{% endmacro %}