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

{# ========================================================================== #}
{# :: Private macros
{# ========================================================================== #}

{% macro _content()%}

	{{formfieldset.combined("", {
		question:"Wat is je bruto maandinkomen?",
		input: {
			name: "monthlyIncome",
			text: "€ 0",
			type: "text"
		},
		select : {
			id: "monthlyIncomePeriod",
			name: "monthlyIncomePeriod",
			type: "select",
			input: {
				placeholder: "maand",
				icon: "far fa-chevron-down",
				options: [
					{
						text:"optie 1"
					},
					{
						text:"optie 2"
					},
					{
						text:"optie 3"
					}
				]
			}
		}
	})}}

	{{formfieldset.yesNoRadio("", {
		question:"vakantiegeld?",
		options:[
			{
				name: "hasHolidayPay",
				text: "ja",
				type: "radio"
			},
			{
				name: "hasHolidayPay",
				text: "nee",
				type: "radio",
				checked:"true"
			}
		]
	})}}

	{{formfieldset.default("", {
		question:"percentage vakantiegeld op basis van je brutoloon?",
		options:[
			{
				name: "monthlyIncome",
				text: "8",
				type: "text"
			}
		]
	})}}

	{{formfieldset.yesNoRadio("", {
		question:"Vaste 13de maand?",
		options:[
			{
				name: "hasThirteenthMonth",
				text: "ja",
				type: "radio"
			},
			{
				name: "hasThirteenthMonth",
				text: "nee",
				type: "radio",
				checked:"true"
			}
		]
	})}}

	{{formfieldset.default("", {
		question:"Hoeveel bedraagt je 13de maand?",
		options:[
			{
				name: "thirteenthMonth",
				text: "€ 0",
				type: "text"
			}
		]
	})}}

	{{formfieldset.footnote("", {
		text:"Bruto jaarinkomen?",
		result:"€ 0,00"
	})}}

	<div class="c-pop-up__submit">
		{{button.default("", {
			text: "Bevestig inkomen"
		})}}
	</div>

{% endmacro %}

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

	<div class="c-pop-up c-pop-up--dark js-pop-up">
		<div class="c-pop-up__container">
			<div class="c-pop-up__content c-bubble c-bubble--small-corners">
				<div class="c-pop-up__header">
					<h3 class="c-pop-up__title">Rekentool</h3>

					<button class="c-pop-up__button c-button c-button--close">
						<span class="fal fa-times c-bubble__icon" aria-hidden="true"></span>
					</button>
				</div>

				{{_content()}}

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

{% endmacro %}