{#
/**
 * @file
 * Template for Input component.
 */
#}
{% set type = type|default('text') %}
{% set name = name|default(id) %}
{% set disabled = disabled|default(false) %}
{% set readonly = readonly|default(false) %}
{% set required = required|default(false) %}

{% set wrapper_classes = [
  'kern-form-input',
  error ? 'kern-form-input--error',
] %}

{% set input_classes = [
  'kern-form-input__input',
  error ? 'kern-form-input__input--error',
] %}

<div {{ attributes.addClass(wrapper_classes) }}>
  <label class="kern-label" for="{{ id }}">
    {{ label }}
    {% if not required %}
      <span class="kern-label__optional">{{ '- Optional'|t }}</span>
    {% endif %}
  </label>

  {% if hint %}
    <div class="kern-hint" id="{{ id }}-hint">
      {{ hint }}
    </div>
  {% endif %}

  <input
    class="{{ input_classes|join(' ') }}"
    id="{{ id }}"
    name="{{ name }}"
    type="{{ type }}"
    {% if value %}value="{{ value }}"{% endif %}
    {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
    {% if disabled %}disabled{% endif %}
    {% if readonly %}readonly{% endif %}
    {% if required %}required{% endif %}
    {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
    {% if hint %}aria-describedby="{{ id }}-hint"{% endif %}
  />

  {% if error %}
    <p class="kern-error" id="{{ id }}-error" role="alert">
      <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
      <span class="kern-body">{{ error }}</span>
    </p>
  {% endif %}
</div>

