{% spaceless %}

{#
  Parameters:
    - "unavailable_language" (string) (default: ''): the name of the unavailable language.
    - "expandable_id" (string) (default: ''): unique ID for the expandable component.
    - "languages" (array) (default: []): array of links to the content in different languages. Format:
      [
        {
          "href" (string) URL of the content (default: ''),
          "hreflang" (string) language code to be used as link attribute,
          "label" (string) link label, i.e. the language name in its native form (default: ''),
          "current" (boolean) whether the language is the current page language or not (default: false)
        },
        ...
      ]
#}
  <div class="ecl-lang-select-page ecl-u-bg-grey-5 ecl-u-pv-m">
    <div class="ecl-container">
      {% include '@ecl-twig/message' with {
        title: 'This page is not available in English.'|t,
        variant: 'warning',
        extra_classes: ecl_component_library == 'ec' ? 'ecl-u-mb-m ecl-u-bg-transparent' : 'ecl-u-mb-m',
        icon: {
          path: ecl_icon_path,
          name: 'warning',
          size: 'l',
        },
        close: {
          label: 'Close this message'|t,
          icon : {
            path: ecl_icon_path,
            name: 'close',
            size: 's',
          }
        },
      } only %}

      {# The expandable containing languages is split in two different blocks: "button" and "languages" #}
      {# This is necessary as, in some cases, additional Webtools widgets might need to be placed right #}
      {# beside the expandalbe button region, whether we have languages or not. #}
      <div class="ecl-u-d-inline-flex ecl-u-align-items-center"{{ languages ? ' data-ecl-expandable="true" data-ecl-auto-init="Expandable"' }}>
        {# This block wraps around the expandable button and it is displayed even if the button is not. #}
        {% block button %}
          {% if languages %}
            {% set _label = 'Choose another language'|t %}
            {% include '@ecl-twig/button' with {
              label: _label,
              variant: 'secondary',
              type: 'button',
              icon_position: "after",
              icon: {
                path: ecl_icon_path,
                name: 'corner-arrow',
                size: 'fluid',
                transform: 'rotate-180'
              },
              extra_classes: 'ecl-expandable__toggle ecl-u-mr-s ecl-u-bg-transparent',
              extra_attributes: [
                { name: 'aria-controls', value: expandable_id ~ '-content'|default('') },
                { name: 'data-ecl-expandable-toggle' },
                { name: 'data-ecl-label-expanded', value: _label },
                { name: 'data-ecl-label-collapsed', value: _label},
                { name: 'aria-expanded', value: 'false' }
              ]
            } only %}
          {% endif %}
        {% endblock %}
      </div>
      {# This block wraps around the expandable content and it is displayed even if the content is not. #}
      {% block language_list %}
        {% if languages %}
        <div id="{{ expandable_id ~ '-content' }}" class="ecl-expandable__content" hidden>
          <ul style="grid-auto-flow: column; grid-template-rows: repeat(4, 1fr)" class="ecl-u-d-block ecl-u-d-m-grid ecl-unordered-list ecl-unordered-list--no-bullet ecl-u-mt-xs ecl-u-type-m">
            {% for language in languages %}
              <li class="ecl-unordered-list__item ecl-u-ma-2xs">
                {% set link_classes = language.current ? 'ecl-u-bg-blue-50 ecl-u-type-color-white ecl-u-type-bold' : '' %}
                {% include '@ecl-twig/link' with {
                  link: {
                    label: language.label,
                    path: language.href,
                    type: 'standalone',
                    no_visited: true,
                    extra_attributes: [
                      [
                        'lang',
                        language.hreflang
                      ]
                    ]
                  },
                  extra_classes: 'ecl-u-pv-s ecl-u-ph-m ecl-u-d-block ' ~ link_classes,
                } only %}
              </li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
      {% endblock %}
    </div>
  </div>

{% endspaceless %}