{% if oView.isLanguageLoaded() and oxcmp_lang|length > 1 %}
    <div class="dropdown c4s-header-language-menu{% if align == "right" %} float-end{% endif %}">
        {% block layout_page_header_icon_menu_languages_button %}
            <button type="button" class="btn dropdown-toggle border-0 c4s-header-service-btn" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                {% set sLangImg = "lang/" ~ oViewConf.getActLanguageAbbr() ~ ".png" %}
                 {# <img src="{{ oViewConf.getImageUrl(sLangImg) }}" alt=""/> #}
                {% if blDisplayServiceMenuIcons %}<i class="fa-solid fa-earth-europe"></i>{% endif %}
                <span> {{ oViewConf.getActLanguageAbbr()|upper }} </span> <i class="fa-solid fa-angle-down"></i>
            </button>
        {% endblock %}
        <ul class="dropdown-menu dropdown-menu-end shadow" role="menu">
            {% block layout_page_header_icon_menu_languages_list %}
                {% for oLang in oxcmp_lang %}
                    {% set sLangImg = "lang/" ~ oLang.abbr ~ ".png" %}
                    <li class="dropdown-item p-0{% if oLang.selected %} active{% endif %}">
                        <a class="btn{% if oLang.selected %} btn-primary{% endif %} w-100 text-start c4s-language {{ oLang.abbr }}" title="{{ oLang.name }}" href="{{ oLang.link|add_url_parameters(oView.getDynUrlParams()) }}" hreflang="{{ oLang.abbr }}">
                            <div class="d-flex align-items-center justify-content-center">
                                <img src="{{ oViewConf.getImageUrl(sLangImg) }}" alt="{{ oLang.name }}" class="my-1">
                                <span class="mx-2 text-uppercase">{{ oLang.name }}</span>
                            </div>
                        </a>
                    </li>
                {% endfor %}
            {% endblock %}
        </ul>
    </div>
{% endif %}