<xf:title>{{ phrase('languages') }}</xf:title>

<xf:pageaction>
	<xf:button href="{{ link('languages/add') }}" icon="add">{{ phrase('add_language') }}</xf:button>
	<xf:button href="{{ link('languages/import') }}" icon="import" />
</xf:pageaction>

<xf:macro name="language_list" arg-children="!" arg-defaultLanguageId="!" arg-depth="1">
	<xf:if is="$children is not empty">
		<xf:foreach loop="$children" value="$child">
			<xf:macro name="language_list_entry" arg-language="{$child.record}" arg-children="{$child.children}" arg-defaultLanguageId="{$defaultLanguageId}" arg-depth="{$depth}" />
		</xf:foreach>
	</xf:if>
</xf:macro>
<xf:macro name="language_list_entry" arg-language="!" arg-children="!" arg-defaultLanguageId="!" arg-depth="1">
	<xf:datarow>

		<xf:main
			hash="{$language.language_id}"
			href="{{ ($language.language_id ? link('languages/edit', $language) : '') }}"
			label="{$language.title}"
			class="dataList-cell--d{$depth}" />

		<xf:if is="$language.language_id">
			<xf:toggle name="user_selectable[{$language.language_id}]"
					   selected="$language.user_selectable"
					   class="dataList-cell--separated u-hideMedium"
					   submit="true"
					   tooltip="{{ phrase('enable_disable_x', {'title': $language.title}) }}" />
			<xf:toggle name="default_language_id"
				type="radio"
				value="{$language.language_id}"
				selected="{{ $defaultLanguageId == $language.language_id ? 1 : 0 }}"
				class="dataList-cell--separated"
				submit="true" />
		<xf:else />
			<xf:cell class="u-hideMedium">&nbsp;</xf:cell>
			<xf:cell>&nbsp;</xf:cell>
		</xf:if>

		<xf:if is="$language.canEdit()">
			<xf:action href="{{ link('languages/phrases', $language) }}" class="dataList-cell--responsiveMenuItem">{{ phrase('phrases') }}</xf:action>
		<xf:else />
			<xf:cell class="dataList-cell--alt dataList-cell--fauxResponsiveMenuItem">&nbsp;</xf:cell>
		</xf:if>

		<xf:if is="$language.language_id">
			<xf:action href="{{ link('languages/export', $language) }}" overlay="true" class="dataList-cell--responsiveMenuItem">{{ phrase('export') }}</xf:action>
		<xf:else />
			<xf:cell class="dataList-cell--alt dataList-cell--fauxResponsiveMenuItem">&nbsp;</xf:cell>
		</xf:if>

		<xf:if is="$language.canEdit()">
			<xf:popup class="dataList-cell--responsiveMenuTrigger" label="&#8226;&#8226;&#8226;">
				<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="dataList">
					<div class="menu-content">
						<h3 class="menu-header">{{ phrase('more_options') }}</h3>
						<div class="js-menuBuilderTarget"></div>
					</div>
				</div>
			</xf:popup>
		<xf:else />
			<xf:cell class="dataList-cell--alt dataList-cell--fauxResponsiveMenuTrigger">&nbsp;</xf:cell>
		</xf:if>

		<xf:if is="$language.language_id">
			<xf:delete href="{{ link('languages/delete', $language) }}" />
		<xf:else />
			<xf:cell class="dataList-cell--alt">&nbsp;</xf:cell>
		</xf:if>

	</xf:datarow>
	<xf:macro name="language_list" arg-children="{$children}" arg-depth="{{ $depth + 1 }}" arg-defaultLanguageId="{$defaultLanguageId}" />
</xf:macro>

<xf:if is="$languageTree is not empty">
	<xf:form action="{{ link('languages/toggle') }}" class="block" ajax="true">
		<div class="block-outer">
			<xf:macro template="filter_macros" name="quick_filter" arg-key="languages" arg-class="block-outer-opposite" />
		</div>
		<div class="block-container">
			<div class="block-body">
				<xf:datalist>
					<xf:macro name="language_list" arg-children="{$languageTree}"
						arg-defaultLanguageId="{$xf.options.defaultLanguageId}" />
				</xf:datalist>
			</div>
			<div class="block-footer">
				<span class="block-footer-counter">{{ display_totals($languageTree.getFlattened(0)) }}</span>
			</div>
		</div>
		<xf:hiddenval name="default_language_id_original">{$xf.options.defaultLanguageId}</xf:hiddenval>
	</xf:form>
</xf:if>