{% extends "@oe-bcl/bcl-modal/modal.html.twig" %}

{%- if _title is not empty %}
  {%- set header = true %}
{% endif %}

{%- if _variant == 'neutral' %}
  {%- set size = "xl" %}
  {%- set fullscreen_responsive = "md" %}
{% else %}
  {%- set size = "fullscreen" %}
{% endif %}

{%- set overlay = false %}
{% set inside_container = true %}

{%- set attributes = attributes.addClass(['bcl-language-list-modal', 'bcl-language-list-modal--' ~ _variant]) %}

{%- block header %}
  {%- if size == 'fullscreen' -%}
  <div class="container">
    {%- if _variant == 'eu' or _variant == 'ec' -%}
    <div class="border-bottom mx-n3 px-3 px-md-0 pt-md-4-5">{# -#}
      <div class="py-3-5 px-3 px-sm-0 px-md-3">
    {%- endif -%}
    <div class="d-flex justify-content-between align-items-center">
  {%- endif -%}
  <div class="d-flex align-items-center">
    {%- set _title_classes = 'modal-title mb-0' %}
    {%- if _icon_path is not empty %}
      {%- set _title_classes = _title_classes ~ ' ms-2' %}
      {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
        name: 'globe2',
        path: _icon_path
      } only %}
    {%- endif -%}
    <div class="{{ _title_classes }}">{{ _title }}</div>{# -#}
  </div>{# -#}
  <button type="button" class="btn-close" data-bs-dismiss="modal"
    {% if _close_label is not empty %}
      aria-label="{{ _close_label }}"
    {% endif %}
  ></button>
  {%- if size == 'fullscreen' -%}
    </div>
    {%- if _variant == 'eu' or _variant == 'ec' -%}
      </div>{# -#}
    </div>
    {%- endif -%}
  </div>
  {%- endif %}
{% endblock %}

{%- block body %}
  {%- set attributes = create_attribute().addClass(['bcl-language-list', 'bcl-language-list--' ~ _variant]) -%}
  <div
    {{ attributes }}
  >
    {%- if _logo is not empty -%}
    <div class="container">
      {%- if _title is empty -%}
      <div class="text-center">
      {%- endif -%}
      <div class="d-inline-flex align-items-center">{# -#}
        <img
          {% if _logo.path is not empty %}
          src="{{ _logo.path }}"
          {% endif %}
          {%- if _logo.alt is not empty %}
          alt="{{ _logo.alt }}"
          {% endif %}
          {%- if _logo.class is not empty %}
          class="{{ _logo.class }}"
          {% endif %}
        />
        {%- if _title is not empty -%}
        <h5 class="h5 ms-4">{{ _title }}</h5>
        {%- endif -%}
      </div>
      {%- if _title is empty -%}
      </div>
      {%- endif -%}
    </div>
    {%- endif %}

    {%- if _items is not empty or _non_eu_items is not empty -%}
    <div class="main pt-4">
      {%- if not (_variant == 'neutral' and _inside_container) -%}
      <div class="container">
      {%- endif %}
      {%- if _items is not empty and _items is iterable %}
        {%- include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
            items: _items,
            icon_path: _icon_path,
            category: eu_category,
        } only %}
      {%- endif %}
      {%- if _non_eu_items is not empty and _non_eu_items is iterable %}
        {%- include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
            items: _non_eu_items,
            icon_path: _icon_path,
            category: non_eu_category,
        } only %}
      {%- endif %}
      {%- if not (_variant == 'neutral' and _inside_container) -%}
      </div>
      {%- endif -%}
    </div>
    {%- endif -%}
  </div>
{%- endblock %}