{#
/**
 * @file
 * CivicTheme Input component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - type: [string] Input type (text, password, email, etc.).
 * - name: [string] DOM name (required).
 * - id: [string] DOM id.
 * - value: [string] The input value.
 * - placeholder: [string] Placeholder text.
 * - is_invalid: [boolean] Whether the input is invalid.
 * - is_disabled: [boolean] Whether the input is disabled.
 * - is_required: [boolean] Whether the input is required.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 */
#}

{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set is_invalid_class = is_invalid ? 'ct-input--is-invalid' : '' %}
{% set modifier_class = '%s %s %s'|format(theme_class, is_invalid_class, modifier_class|default(''))|trim %}

{% if name is not empty %}
  <input
    type="{{ type }}"
    class="ct-input {{ modifier_class -}}"
    name="{{ name }}"
    {% if value is not empty %}value="{{ value }}"{% endif %}
    {% if id %}id="{{ id }}"{% endif %}
    {% if is_disabled %}disabled{% endif %}
    {% if is_required %}required{% endif %}
    {% if is_invalid %}aria-invalid="true"{% endif %}
    {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
    {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  />
{% endif %}
