{#{% apply spaceless %}#}

{#
  Parameters:
  - "id" (string) (default: '')
  - "options" (array) (default: []):
    - "value" (string) (default: '')
    - "label" (string) (default: '')
    - "disabled" (boolean) (default: false)
    - "selected" (boolean) (default: false)
  - "disabled" (boolean) (default: false)
  - "invalid" (boolean) (default: false)
  - "invalid_icon" (object of type "icon") (default: {})
  - "required" (boolean) (default: false)
  - "name" (string) (default: '')
  - "width" (string) (default: '')
  - "icon_path" (string) (default: ''): file containing the svg icons
  - "multiple" (boolean) (optional) (default: false) For the multiple select
  - "multiple_placeholder" (string)(default: '') Label for the multiple select placeholder
  - "multiple_all_text" (string)(default: '') Label for the select all option
  - "multiple_clear_all_text" (string)(default: '') Label for the clear all button
  - "multiple_close_text" (string)(default: '') Label for the close button
  - "multiple_search_text" (string)(default: '') Label for the search box inside the multiple select
  - "multiple_search_no_results_text" (string)(default: '') Label label when there is no result by searching for an option
  - "extra_group_classes" (optional) (string) (default: '') Extra classes (space separated) for the select group
  - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the select
  - "extra_attributes" (optional) (array) (default: []) Extra attributes for select
    - "name" (string) Attribute name, eg. 'data-test'
    - "value" (optional) (string) Attribute value, eg: 'data-test-1'
  Blocks:
  - "helper_text"
  - "invalid_text"
  - "required_text"
  - "optional_text"
  - "label"
#}

{# Internal properties #}

{% set _id = id|default('') %}
{% set _options = options|default([]) %}
{% set _disabled = disabled|default(false) %}
{% set _invalid = invalid|default(false) %}
{% set _invalid_icon = invalid_icon|default({}) %}
{% set _required = required|default(false) %}
{% set _name = name|default('') %}
{% set _icon_path = icon_path|default(false) %}
{% set _width = width|default('m') %}
{% set _helper_text = helper_text|default('') %}
{% set _invalid_text = invalid_text|default('') %}
{% set _required_text = required_text|default('') %}
{% set _optional_text = optional_text|default('') %}
{% set _label = label|default('') %}
{% set _multiple = multiple|default(false) %}
{% set _multiple_placeholder = multiple_placeholder|default('') %}
{% set _multiple_all_text = multiple_all_text|default('') %}
{% set _multiple_search_text = multiple_search_text|default('') %}
{% set _multiple_search_no_results_text = multiple_search_no_results_text|default('') %}
{% set _multiple_search_text = multiple_search_text|default('') %}
{% set _multiple_close_text = multiple_close_text|default('') %}
{% set _multiple_clear_all_text = multiple_clear_all_text|default('') %}
{% set _css_group_class = 'ecl-form-group' %}
{% set _css_class = ['ecl-select'] %}
{% set _css_class = _css_class|join(' ') %}
{% set _extra_attributes = '' %}
{% if _multiple %}
  {% set extra_attributes = [
    { name: 'multiple' },
    { name: 'data-ecl-auto-init', value: 'Select' },
    { name: 'data-ecl-select-multiple'},
    { name: 'data-ecl-select-default', value: _multiple_placeholder },
    { name: 'data-ecl-select-search', value: _multiple_search_text },
    { name: 'data-ecl-select-no-results', value: _multiple_search_no_results_text },
    { name: 'data-ecl-select-all', value: _multiple_all_text },
    { name: 'data-ecl-select-clear-all', value: _multiple_clear_all_text },
    { name: 'data-ecl-select-close', value: _multiple_close_text }
  ]|merge(extra_attributes|default([])) %}
{% endif %}

{# Internal logic - Process properties #}

{% if extra_group_classes is defined and extra_group_classes is not empty %}
  {% set _css_group_class = _css_group_class ~ ' ' ~ extra_group_classes %}
{% endif %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
  {% for attr in extra_attributes %}

    {% if attr.value is defined %}
      {% if attr.name == "data-drupal-states" %}
        {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|raw ~ '"' %}
      {% else %}
      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
      {% endif %}
    {% else %}
      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
    {% endif %}
  {% endfor %}
{% endif %}

{# Print the result #}
<div class="{{ _css_group_class }}">
  {% if _label is not empty %}
    <label
    {% if _id %}
      for="{{ _id }}"
    {% endif %}
      class="ecl-form-label
      {{- _invalid ? ' ecl-form-label--invalid' -}}
      {{- _disabled ? ' ecl-form-label--disabled' }}"
    >
      {%- block label _label -%}
      {%- if _required and _required_text is not empty -%}
        <span class="ecl-form-label__required">{{ _required_text }}</span>
      {%- elseif not _required and _optional_text is not empty -%}
        <span class="ecl-form-label__optional">{{ ' ' ~ _optional_text }}</span>
      {%- endif -%}
    </label>
  {% endif %}

  {% if _helper_text is not empty %}
    <div class="ecl-help-block{{ _disabled ? ' ecl-help-block--disabled' }}">
      {%- block helper_text _helper_text -%}
    </div>
  {% endif %}

  {% if _invalid and _invalid_text is not empty %}
    <div class="ecl-feedback-message">
      {%- if _invalid_icon is not empty %}
      {% include '@ecl/icon/icon.html.twig' with {
        icon: _invalid_icon,
        extra_classes: 'ecl-feedback-message__icon',
      } only %}
      {% endif -%}
      {%- block invalid_text _invalid_text -%}
    </div>
  {% endif %}

  <div class="ecl-select__container
    {{- _disabled ? ' ecl-select__container--disabled' -}}
    {{- _invalid ? ' ecl-select__container--invalid' -}}
    {{- ' ecl-select__container--' ~ _width }}"
  >
    <select
      class="{{ _css_class }}"
    {% if _id %}
      id="{{ _id }}"
    {% endif %}
    {% if _name is not empty %}
      name="{{ _name }}"
    {% endif %}
    {% if _required %}
      required
    {% endif %}
    {% if _disabled %}
      disabled
    {% endif %}
      {{- _extra_attributes|raw -}}
    >
      {% for _option in _options %}
        {% if _option.optgroup %}
        <optgroup label="{{ _option.optgroup.label }}">
        {% for _option_grouped in _option.optgroup.options %}
          <option
            value="{{ _option_grouped.value }}"
            {% if _option_grouped.selected %}
              selected
            {% endif %}
            {% if _option_grouped.disabled %}
              disabled
            {% endif %}
          >
            {{- _option_grouped.label -}}
          </option>
        {% endfor %}
        </optgroup>
        {% else %}
          <option
            value="{{ _option.value }}"
          {% if _option.selected %}
            selected
          {% endif %}
          {% if _option.disabled %}
            disabled
          {% endif %}
          >
            {{- _option.label -}}
          </option>
        {% endif %}
      {% endfor %}
    </select>

    <div class="ecl-select__icon">
      {% include '@ecl/icon/icon.html.twig' with {
        icon: {
          path: _icon_path,
          name: "corner-arrow",
          size: "s",
          transform: "rotate-180"
        },
        extra_classes: "ecl-select__icon-shape"
      } only %}
    </div>
  </div>
</div>

{#{% endapply %}#}