{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/button.njk" as button %}

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

	<div class="bp-c-input {{'is-disabled' if data.isDisabled}} {{classes}} {{'bp-c-input--with-button' if data.button}}">
		{% if data.label %}
			<label class="bp-c-input__label {{data.label.classes}}" for="{{data.name}}">
				{{data.label.text}}
			</label>
		{% endif %}

		<div class="bp-c-input__wrapper">
			<input
				id="{{data.id}}"
				class="bp-c-input__field"
				type="{{data.input.type}}"
				name="{{data.name}}"
				placeholder="{{data.input.placeholder}}"
				{% if data.isDisabled %} disabled {% endif %}
				{% if data.required %} required {% endif %}
			/>

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

{% endmacro %}