{% set selected = selected|default(getCurrentLanguage()) %}
{% set model = createModel('Language') %}
{% set selected = (selected is string) ? model.findByColumn(selected,'code') : selected %}
{% set data_type = data_type|default('code') %}

{% set show_native_title = show_native_title|default(false) %}
{% set items = model.where('status',1).orderBy('position').get() %}
{% set link_class = link_class|default('px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900') %}
<div 
    id="{{ component_id }}"
    selected="{{ selected.code }}"
    class="language-dropdown relative inline-block text-left"> 
    <btn type="button" 
        class="dropdown-button cursor-pointer flex justify-center self-center {{ button_class|default('p-2 rounded-md') }}" 
        id="language-button" aria-expanded="true" aria-haspopup="true">
        <i class="ui flag {{ selected.country_code|lower }}"></i>
        {% if hide_icon != true %}
            {{  component('icons~chevron.down',{ 
                    class: icon_class|default('self-center cursor-pointer'),
                    size: icon_size|default('h-4 w-4')
                },'svg') 
            }}       
        {% endif %}
    </btn>
    <div id="language-menu" 
        class="hidden z-50 origin-top-right absolute right-0 {{ size|default('w-56 h-full') }} {{ class }}" 
        role="menu" 
        aria-orientation="vertical" 
        aria-labelledby="options-menu">
        <input name="{{ name }}" type="hidden" value="{{ selected.code }}">
        <div class="py-1 {{ color|default('bg-white rounded-lg shadow-lg') }}">
            {% for item in items %}
            <div 
                data-value="{{ item[data_type] }}" 
                class="language-item cursor-pointer block {{ link_class }}" 
                role="menuitem">
                <i class="flag {{ item.country_code|lower }}"></i>
                {% set bold_style = (item.code == selected.code) ? 'font-bold' : '' %}             
                {% if show_native_title == true %}
                    <span class="{{ bold_style }}">{{ item.native_title }}</span>
                {% else %}
                    <span class="{{ bold_style }}">{{ item.title }}</span>
                {% endif %}
            </div>
            {% endfor %}    
        </div>
    </div>
</div>