{% if isMobilePhoneOnly() %}
<li class="usermenu languagemenu">
	<a data-toggle="modal" class="{{ data.activeLocale|first.iso|lower }}" data-target="#languageSelectionModal">
		<span class="flag m0"></span>
		<span class="countryname hidden-lg hidden-md hidden-sm">{{ data.activeLocale|first.menuTitle }}</span>
		<i class="fa fa-angle-down"></i>
	</a>
</li>
{% else %}

<li class="dropdown usermenu languagemenu">
	<a href="#" class="dropdown-toggle {{ data.activeLocale|first.iso|lower }}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
		<span class="flag m0"></span> 
		<span class="countryname hidden-lg hidden-md hidden-sm">{{ data.activeLocale|first.menuTitle }}</span>
		<i class="fa fa-angle-down"></i> 
	</a>
	<div class="dropdown-menu">
		<div class="country clearfix">
			<h3 class="pl10 pt5 ">{{ "CHANGE_COUNTRY"|translate }}</h3>
			<div class="continent">
				<ul>
					{% for country in data.countries %}
						{% if country.bilingual %}
							<li>
								<a class="{{ country|first.iso|lower }}" onclick="showLanguages(this);">
									<span class="flag"></span>
									<span class="countryname">{{ country|first.menuTitle }}</span>
									<i class="fa fa-angle-right"></i>
								</a>
							</li>
						{% else %}
							<li>
								<a class="{{ country|first.iso|lower }}" href="{{ country|first.urlLocale }}">
									<span class="flag"></span>
									<span class="countryname">{{ country|first.menuTitle }}</span>
									<i class="fa fa-angle-right"></i>
								</a>
							</li>
						{% endif %}
						{% if loop.index % 14 == 0 %}
						{# every 10 countries begin a new column #}
							</ul>
							<ul>
						{% endif %}
					{% endfor %}
				</ul>
			</div>
		</div>
		{% if data.countries is valuableArray %}
            {% for country in data.countries %}
                {% if country.bilingual %}
				{% set hidden = (data.activeLocale|first.iso|lower == country|first.iso|lower ? '' : 'style="display: none;"') %}
				<div class="language clearfix" id="language_{{ country|first.iso|lower }}" {{ hidden|raw }}>
					<ul>
						<h3 class="pt5">{{ "CHANGE_LANGUAGE"|translate }}</h3>
						<a class="{{ country|first.iso|lower }} selected" href="javascript:void(0);" style="cursor: default;">
							<span class="flag"></span>
							<span class="countryname">{{ country|first.menuTitle }}</span>
						</a>
						{% for language in country %}
						{% if loop.index != country|length %}
                            {# apparently the last element is an empty one#}
						<li>
							<a class="" href="{{ language.urlLocale }}"> {{ language.languageName }}</a>
						</li>
						{% endif %}
						{% endfor %}
					</ul>
				</div>
                {% endif %}
            {% endfor %}
		{% endif %}
	</div>				
</li>
{% endif %}