{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "styleguides/general/molecules/tooltip/tooltip-macros.njk" as tooltip %}

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

<div class="a-input {{classes}} {{'is-disabled' if data.isDisabled}} {{'js-toggle-password' if type == 'password'}} {{'a-input--currency' if data.currency}}">

  {% if data.label %}
     <label class="a-input__label" for="{{data.id}}">
      {{data.label}}

      {% if data.tooltip %}
        {% if data.tooltipDirection == "down" %}
          {{tooltip.down("a-input__tooltip", data.tooltip)}}
        {% else %}
          {{tooltip.default("a-input__tooltip", data.tooltip)}}
        {% endif %}
      {% endif %}
    </label>
  {% endif %}

  <div class="a-input__container {{'a-input__container--with-icon' if data.icon}} {{data.icon}}">
    {% if data.currency %}
      <span class="a-input__currency">
        {{data.currency}}
      </span>
    {% endif %}

    <input
      class="a-input__field"
      type="{{type}}"
      id="{{data.id}}"
      name="{{data.id}}"
      placeholder="{{data.placeholder}}"
      {% if data.isDisabled %}disabled{% endif %}
    />

    {% if data.button %}
      <button class="a-input__button">
        {{data.button or data.submit}}
      </button>
    {% endif %}

    {% if type == "password" %}
      <span class="a-input__toggle-password"></span>
    {% endif %}
  </div>

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

  {% if data.link %}
    <a href="#" class="a-input__link">{{data.link}}</a>
  {% endif %}
</div>

{% endmacro %}

{# ========================================================================= #}
{# :: Text #}
{# ========================================================================= #}
{% macro text(classes, data) %}

  {{_component(classes, "text", data)}}

{% endmacro %}

{# ========================================================================= #}
{# :: E-mail #}
{# ========================================================================= #}
{% macro email(classes, data) %}

  {{_component(classes, "email", data)}}

{% endmacro %}

{# ========================================================================= #}
{# :: Tel #}
{# ========================================================================= #}
{% macro tel(classes, data) %}

  {{_component(classes, "tel", data)}}

{% endmacro %}

{# ========================================================================= #}
{# :: Number #}
{# ========================================================================= #}
{% macro number(classes, data) %}

  {{_component(classes, "number", data)}}

{% endmacro %}

{# ========================================================================= #}
{# :: Password #}
{# ========================================================================= #}
{% macro password(classes, data) %}

  {{_component(classes, "password", data)}}

{% endmacro %}

{# ========================================================================= #}
{# :: Date #}
{# ========================================================================= #}
{% macro date(classes, data) %}

  {{_component(classes, "date", data)}}

{% endmacro %}

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

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

  {% if data.label %}
     <label class="a-input__label" for="{{data.id}}">
      {{data.label}}
    </label>
  {% endif %}

  <div class="a-input__container">
    <select class="a-input__field" id="{{data.id}}" name="{{data.id}}">
      {% if data.placeholder %}
        <option selected disabled>{{data.placeholder}}</option>
      {% endif %}

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

</div>

{% endmacro %}

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

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

  {% if data.label %}
     <label class="a-input__label" for="{{data.id}}">
      {{data.label}}
    </label>
  {% endif %}

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

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

</div>

{% endmacro %}


{# ========================================================================= #}
{# :: SLDS INPUT #}
{# ========================================================================= #}

{# !!!!!  DON'T CHANGE THE HTML !!!!! #}

{# We're basing this component on the one provided by the dev framework: #}
{# https://www.lightningdesignsystem.com/components/input/ #}


{% macro calendar(classes, data) %}

<div class="a-input s-slds-input-calendar" data-aura-rendered-by="85:69;a">
	<label class="a-input__label" for="" data-aura-rendered-by="86:69;a">{{data.label}}</label>
	<div class="a-input__container  " data-aura-rendered-by="88:69;a">
		<lightning-input class="a-input__field slds-form-element" data-aura-rendered-by="89:69;a" lightning-input_input-host="">
			<span lightning-input_input="" data-aria="true" class="slds-assistive-text"></span>
			<lightning-datepicker lightning-input_input="" data-position-id="lgcp-1000000">
        <div tabindex="0" class="slds-form-element slds-dropdown-trigger slds-dropdown-trigger_click slds-size_1-of-1">
					<label for="input-5" class="slds-form-element__label slds-assistive-text"></label>
					<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
						<input type="text" id="input-5" class="slds-input" data-position-id="lgcp-1000001">
						<lightning-button-icon class="slds-input__icon slds-input__icon_right">
							<button title="Een datum selecteren" type="button" class="slds-button slds-button_icon-bare">
								<lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
									<svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="event" aria-hidden="true" class="slds-button__icon">
										<use lightning-primitiveIcon_primitiveIcon="" xlink:href="/nibcdirect/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.24.0#event"></use>
									</svg>
								</lightning-primitive-icon>
								<span class="slds-assistive-text">Een datum selecteren</span>
							</button>
						</lightning-button-icon>
					</div>
				</div>
			</lightning-datepicker>
		</lightning-input>
	</div>
</div>


{% endmacro %}