{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}

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

	<div class="a-input {{classes}}">

		<div class="a-input__container">
			<input
        class="a-input__field"
				type="{{data.type}}" id="{{data.name}}" name="{{data.name}}" placeholder=" " value="{{data.value}}"
				{% if data.type === "number" %}
					min="{{data.min}}"
					max="{{data.max}}"
					step="{{data.step}}"
				{% endif %}
				{% if data.required %}
					required
				{% endif %}
			/>

			<label for="{{data.name}}" class="a-input__label">{{data.label}}
				{% if data.optional %}
					<small>(optioneel)</small>
				{% endif %}
			</label>

		</div>

		{% if data.feedback %}
			<small class="a-input__feedback">{{data.feedback}}</small>
		{% endif %}
	</div>

{% endmacro %}

{# ========================================================================= #}
{# :: Default with pretext #}
{# ========================================================================= #}
{% macro defaultWithPretext(classes, data) %}

	<div class="a-input {{classes}}">

		<div class="a-input__container">

			<input
        class="a-input__field"
				type="{{data.type}}" id="{{data.name}}" name="{{data.name}}" placeholder=" " value="{{data.value}}"
				{% if data.type === "number" %}
					min="{{data.min}}"
					max="{{data.max}}"
					step="{{data.step}}"
				{% endif %}
				{% if data.required %}
					required
				{% endif %}
			/>

			<label for="{{data.name}}" class="a-input__label"><span class="a-input__pretext">{{data.pretext}}</span> {{data.label}}
				{% if data.optional %}
					<small>(optioneel)</small>
				{% endif %}
			</label>

		</div>

		{% if data.feedback %}
			<small class="a-input__feedback">{{data.feedback}}</small>
		{% endif %}
	</div>

{% endmacro %}

{# ========================================================================= #}
{# :: DEFAULT ERROR #}
{# ========================================================================= #}
{% macro defaultError(classes, data) %}

	<div class="a-input is-error {{classes}}">

		<div class="a-input__container">
			<input
        class="a-input__field"
				type="{{data.type}}" id="{{data.name}}" name="{{data.name}}" placeholder=" " value="{{data.value}}"
				{% if data.type === "number" %}
					min="{{data.min}}"
					max="{{data.max}}"
					step="{{data.step}}"
				{% endif %}
				{% if data.required %}
					required
				{% endif %}
			/>

			<label for="{{data.name}}" class="a-input__label">{{data.label}}
				{% if data.optional %}
					<small>(optional)</small>
				{% endif %}
			</label>
		</div>

    {% if data.feedback %}
			<small class="a-input__feedback {{data.icon}}">{{data.feedback}}</small>
		{% endif %}

	</div>

{% endmacro %}

{# ========================================================================= #}
{# :: SELECT #}
{# ========================================================================= #}
{% macro select(classes, data) %}

	<div class="a-input a-input--select {{classes}}">

		<div class="a-input__container">
			<select class="a-input__field">
				<option class="a-input--select__placeholder" selected disabled>Selecteer een item</option>

				{% for option in data.options %}
					{% if option.items %}

						<optgroup label="{{option.label}}">
							{% for subitem in option.items %}
								<option value="{{subitem}}">{{subitem}}</option>
							{% endfor %}
						</optgroup>

					{% else %}

						<option value="{{option}}">{{option}}</option>

					{% endif %}
				{% endfor %}
			</select>

			<label for="{{data.name}}" class="a-input__label">{{data.label}}
				{% if data.optional %}
					<small>(optioneel)</small>
				{% endif %}
			</label>
		</div>

	</div>

{% endmacro %}

{# ========================================================================= #}
{# :: SELECT ERROR #}
{# ========================================================================= #}
{% macro selectError(classes, data) %}

	<div class="a-input a-input--select is-error {{classes}}">

		<div class="a-input__container">
			<select class="a-input__field">
				<option class="a-input--select__placeholder" selected disabled>Selecteer een item</option>

				{% for option in data.options %}
					<option value="{{option}}">{{option}}</option>
				{% endfor %}
			</select>

			<label for="{{data.name}}" class="a-input__label">{{data.label}}
				{% if data.optional %}
					<small>(optioneel)</small>
				{% endif %}
			</label>
		</div>
	</div>

{% endmacro %}

{# ========================================================================= #}
{# :: TEXTAREA #}
{# ========================================================================= #}
{% macro textarea(classes, data) %}

	<div class="a-input a-input--textarea {{classes}}">

		<div class="a-input__container">
			<textarea class="a-input__field" col="{{data.col}}" rows="{{data.row}}" placeholder=" " name="{{data.name}}"></textarea>

			<label for="{{data.name}}" class="a-input__label">{{data.label}}
				{% if data.optional %}
					<small>(optioneel)</small>
				{% endif %}
			</label>
		</div>
	</div>

{% endmacro %}


{# ========================================================================= #}
{# :: FILE #}
{# ========================================================================= #}
{% macro file(classes, data) %}

	<div class="a-input a-input--file js-a-input-file {{classes}}">
		<input class="a-input__field" type="file" name="{{data.name}}" id="{{data.name}}" />
	</div>

{% endmacro %}

{# ========================================================================= #}
{# :: DATEPICKER #}
{# ========================================================================= #}
{% macro datepicker(classes, data) %}

	<div class="a-input a-input--datepicker js-a-datepicker {{classes}}" data-is-range="true" >
		<div class="a-input__container">
			<input class="a-input__field a-input__datepicker" type="text" placeholder=" " value="{{data.value}}">
			<label for="{{data.name}}" class="a-input__label">{{data.text}}
				{% if data.optional %}
					<small>optional</small>
				{% endif %}
			</label>
		</div>
	</div>

{% endmacro %}


{# ========================================================================= #}
{# :: SEARCH #}
{# ========================================================================= #}
{% macro search(classes, data) %}

	<div class="a-input a-input--search {{classes}}">

		<div class="a-input__container">
			<input class="a-input__field" type="text" id="{{data.name}}" name="{{data.name}}" placeholder=" " value="{{data.value}}"	/>

			<label for="{{data.name}}" class="a-input__label">{{data.label}}</label>
		</div>

    <button class="a-button a-button--inverted a-input__button" {% for item in data.attributes %} {{item.attribute}} = {{item.value}} {% endfor %}>
      <span class="a-button__icon a-button__icon--before icon-search"></span>
      <span class="a-button__text">Zoek</span>
    </button>
	</div>

{% endmacro %}

{# ========================================================================= #}
{# :: NEWSLETTER #}
{# ========================================================================= #}
{% macro newsletter(classes, data) %}

	<div class="a-input a-input--newsletter js-a-input-newsletter {{classes}}">
		<div class="a-input__container">
			<input class="a-input__field" type="text" id="{{data.name}}" name="{{data.name}}" placeholder=" " value=""	/>

			<label for="{{data.name}}" class="a-input__label">{{data.label}}</label>
		</div>

    {{data.button | safe}}

    <div class="a-input__checkmark">
      <svg width="20px" height="20px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <polyline id="Path-2" stroke="#ffffff" stroke-width="2" fill="none" fill-rule="evenodd" points="15 1.18222222 5.12326754 10.6663368 1 6.66644098"></polyline>
      </svg>
    </div>
	</div>

{% endmacro %}

{# ========================================================================= #}
{# :: FILE #}
{# ========================================================================= #}
{% macro file(classes, data) %}

  <div class="a-input a-input--file {{classes}}">
    <div class="a-input__container">
      <input class="a-input__field js-a-fileupload" type="file" id="{{data.name}}" name="{{data.name}}" placeholder=" " value=""	/>

      <label for="{{data.name}}" class="a-input__label"><span class="icon-download"></span><span class="js-a-fileupload-value">{{data.label}}</span></label>
    </div>
  </div>

  <div class="a-input a-input--file l-grid__col-12-12">
    <div class="a-input__container">
      <input class="a-input__field js-a-fileupload" name="vacature" type="file">
      <label for="vacature" class="a-input__label"><span class="icon-download"></span><span class="js-a-fileupload-value">Motivation</span></label>
    </div>
  </div>

{% endmacro %}