{# ========================================================================== #}
{# :: Private macro's #}
{# ========================================================================== #}
{% macro _component(classes, data, field) %}

	<div class="c-input {{'is-disabled' if data.isDisabled}} {{classes}}">

		{% if data.label %}
			<label class="c-input__label {{data.label.classes}}" for="{{data.name}}">{{data.label.text}}</label>
		{% endif %}

		<div class="c-input__wrapper
			{{'c-input__wrapper--with-icon' if data.input.icon}}
			{{'c-input__wrapper--with-button' if data.input.button}}">

			{{field | safe}}

			{% if data.input.icon or "c-input--select" in classes %}
				<span class="c-input__icon {{data.input.icon}}"></span>
			{% endif %}

			{% if data.input.button %}
				<div class="c-input__button">
					{{data.input.button | safe}}
				</div>
			{% endif %}
		</div>

		{% if data.info %}
			<div class="c-input__info {{data.info.classes}}">
				<p class="c-input__info-text">{{data.info.text}}</p>
			</div>
		{% endif %}

		{% if data.feedback %}
			<div class="c-input__feedback {{data.feedback.classes}}">
				<p class="c-input__feedback-text">{{data.feedback.text}}</p>
			</div>
		{% endif %}
	</div>

{% endmacro %}

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

	{% set field %}
		<input
			id="{{data.id}}"
			class="c-input__field"
			type="{{data.input.type}}"
			name="{{data.name}}"
			placeholder="{{data.input.placeholder}}"
			value="{{data.input.value}}"
			{% if data.input.min %}min="{{data.input.min}}"{% endif %}
			{% if data.input.max %}max="{{data.input.max}}"{% endif %}
			{% if data.input.step %}step="{{data.input.step}}"{% endif %}
		/>
	{% endset %}

	{{_component(classes, data, field)}}

{% endmacro %}

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

	{% set field %}
		<select class="c-input__select" id="{{data.id}}" name="{{data.name}}">
			{% if data.input.placeholder %}
				<option selected disabled>{{data.input.placeholder}}</option>
			{% endif %}

			{% for item in data.input.options %}
				<option {{selected if item.selected}} value="{{item.value}}">{{item.text}}</option>
			{% endfor %}
		</select>
	{% endset %}

	{{_component("c-input--select " + classes, data, field)}}

{% endmacro %}

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

	{% set field %}
		<textarea
			class="c-input__textarea"
			cols="{{data.input.cols or 42}}"
			rows="{{data.input.row or 5}}"
			name="{{data.name}}"
			id="{{data.id}}"
			placeholder="{{data.input.placeholder}}"
		>
			{{data.input.value}}
		</textarea>
	{% endset %}

	{{_component("c-input--textarea " + classes, data, field)}}

{% endmacro %}