{#
/**
 * @file
 * Template for Textarea component.
 */
#}
{% set name = name|default(id) %}
{% set rows = rows|default(4) %}
{% 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 textarea_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</span>
    {% endif %}
  </label>
  
  {% if hint %}
    <div class="kern-hint" id="{{ id }}-hint">
      {{ hint }}
    </div>
  {% endif %}
  
  <textarea
    class="{{ textarea_classes|join(' ') }}"
    id="{{ id }}"
    name="{{ name }}"
    rows="{{ rows }}"
    {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
    {% if disabled %}disabled{% endif %}
    {% if readonly %}readonly{% endif %}
    {% if required %}required{% endif %}
    {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}
    {% if hint %}aria-describedby="{{ id }}-hint"{% endif %}
  >{{ value }}</textarea>
  
  {% 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>

