Input: Color

{% set id = id ??? html_id('input') %}
{% set type = type ?? 'text' %}
{% set dateType = type == 'date' or type == 'datetime-local' or type == 'time' %}
{% set value = value ?? null %}
{% set placeholder = placeholder ?? null %}
{% set autocomplete = autocomplete ?? null %}
{% set required = required ?? false %}
{% set disabled = disabled ?? false %}
{% set invalid = invalid ?? false %}
{% set multiple = multiple ?? false %}
{% set readonly = readonly ?? false %}
{% set name = name ?? null %}
{% set tel = type == 'tel' ? tel|default %}
{% set limitType = limitType ?? null %}
{% set limit = limit ?? null -%}

{% set inputAttributes = {
  class: 'input__input',
  id: id,
  name: name,
  autocomplete: autocomplete,
  autofocus: autofocus ?? false,
  multiple: multiple,
  required: required ? true : false,
  'aria-describedby': describedBy ?? false,
  'aria-invalid': invalid ? 'true' : null,
  'aria-required': required ? 'true' : null,
  disabled: disabled ? true : false,
  readonly: readonly ? true : false,
  'data-input-type': type,
} -%}

<div {{ html_attributes({
  id: containerId ??? ('container' | namespaceInputId(id)),
  class: 'input',
}, attrs ?? {}) }}>
  <div class="input__line">
    {%- if icon|default %}
      <div class="input__icon">
        {% include '@icon' with {
          icon: icon,
        } only %}
      </div>
    {% endif %}

    {%- if prependText|default -%}
      <div class="input__text">
        {{- prependText -}}
      </div>
    {%- endif -%}

    {% switch type %}
      {%- case 'textarea' %}
        <textarea {{ html_attributes(inputAttributes | merge({
          rows: rows ?? 4,
          placeholder: placeholder,
          maxlength: maxlength ?? false,
          'data-input-limit': limit and limitType ? 'limit' | namespaceInputId(id),
          'data-input-limit-count': limit and limitType ? limit,
          'data-input-limit-type': limit and limitType ? limitType,
        }), inputAttrs ?? {}) }}>{{ value }}</textarea>

      {%- case 'select' %}
        <select {{ html_attributes(inputAttributes, inputAttrs ?? {}) }}>
          {% set hasOptgroups = false %}

          {%- if required and selectValue is defined and selectValue %}
            <option class="input__option input__option--select" disabled selected value="">
              {{- selectValue -}}
            </option>
          {% endif -%}

          {% if resetValue is defined and resetValue %}
            <option class="input__option input__option--reset" value="">
              {{- resetValue -}}
            </option>
          {% endif %}

          {%- for option in options %}
            {% if option.optgroup is defined and option.optgroup %}
              {% if hasOptgroups %}
                </optgroup>
              {% else %}
                {% set hasOptgroups = true %}
              {% endif %}

              <optgroup class="input__option-group" label="{{ option.optgroup }}">
            {% else %}
              <option {{ html_attributes({
                class: 'input__option',
                value: option.value,
                selected: option.selected ?? value == option.value,
                disabled: option.disabled ?? false,
              }) }}>
                {{- option.label -}}
              </option>
            {% endif %}
          {% endfor -%}

          {% if hasOptgroups %}
            </optgroup>
          {% endif %}
        </select>

        {%- if not multiple %}
          <div class="input__icon input__icon--select">
            {% include '@icon' with {
              icon: 'arrow-down',
            } only %}
          </div>
        {% endif %}

      {%- case 'tel-international' %}
        <input {{ html_attributes({
          type: 'hidden',
          name: 'country' | namespaceInputName(name),
          id: 'country' | namespaceInputId(id),
          value: country ?? null,
        }) }}>

        <input {{ html_attributes(inputAttributes | merge({
          name: 'phoneNumber' | namespaceInputName(name),
          value: phoneNumber ?? value ?? null,
          type: 'tel',
          placeholder: placeholder,
          inputmode: inputmode ?? 'tel',
          spellcheck: spellcheck ?? 'false',
          'data-input-tel': {
            initialCountry: country ?? null,
            countryOrder: countryOrder ?? null,
            onlyCountries: onlyCountries ?? null,
            countryInput: 'country' | namespaceInputId(id),
            i18n: {
              selectedCountryAriaLabel: 'Selected country' | t('site'),
              noCountrySelected: 'No country selected' | t('site'),
              countryListAriaLabel: 'List of countries' | t('site'),
              searchPlaceholder: 'Search for country' | t('site'),
              zeroSearchResults: 'No results found' | t('site'),
              oneSearchResult: '1 result found' | t('site'),
              multipleSearchResults: '${count} results found' | t('site'),
            },
          },
        }), inputAttrs ?? {}) }} />

      {%- default %}
        <input {{ html_attributes(inputAttributes | merge({
          value: type != 'file' ? value,
          type: type,
          placeholder: placeholder,
          maxlength: maxlength ?? false,
          min: min ?? false,
          max: max ?? false,
          step: step ?? false,
          multiple: multiple ?? false,
          accept: accept ?? false,
          inputmode: inputmode ?? false,
          spellcheck: type == 'password' ? 'false' : (spellcheck ?? false),
          'data-input-date': dateType,
          'data-input-empty': dateType ? not value or value == '',
          'data-input-no-spinners': type == 'number' and noSpinners|default,
          'data-input-limit': limit and limitType ? 'limit' | namespaceInputId(id),
          'data-input-limit-count': limit and limitType ? limit,
          'data-input-limit-type': limit and limitType ? limitType,
          'data-input-select-on-click': selectOnClick ?? false,
        }), inputAttrs ?? {}) }} />

        {%- if dateType %}
          <button class="input__picker" type="button">
            {% include '@icon' with {
              icon: 'calendar',
            } only %}
          </button>
        {% endif %}

    {%- endswitch -%}

    {%- if appendText|default -%}
      <div class="input__text">
        {{- appendText -}}
      </div>
    {%- endif -%}
  </div>

  {% if type == 'file' and files|default %}
    <ul class="input__uploads">
      {% for file in files %}
        <li class="input__pill">{{ file }}</li>
      {% endfor %}
    </ul>
  {% endif %}

  {%- if limit and limitType and (type == 'textarea' or type == 'text') -%}
    <div class="input__limit">
      <span class="input__pill" id="{{ 'limit' | namespaceInputId(id) }}">
        {%- if limitType == 'words' -%}
          {{ 'Words left: **{words}**' | t('site', {
            words: limit - (value | default('') | words | length),
          }) | markdown }}
        {%- elseif limitType == 'characters' -%}
          {{ 'Characters left: **{chars}**' | t('site', {
            chars: limit - (value | default('') | length),
          }) | markdown }}
        {%- endif -%}
      </span>
    </div>
  {%- endif -%}
</div>