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

<xf:pageaction>
	<xf:button href="{{ link('admin-navigation/add') }}" icon="add">{{ phrase('add_navigation') }}</xf:button>
</xf:pageaction>

<div class="block">
	<div class="block-outer">
		<xf:macro id="filter_macros::quick_filter" arg-key="admin-navigation" arg-class="block-outer-opposite" />
	</div>
	<div class="block-container">
		<div class="block-body">
			<xf:datalist>
				<xf:macro id="navigation_list" arg-children="{$tree}" />
			</xf:datalist>
		</div>
		<div class="block-footer">
			<span class="block-footer-counter">{{ display_totals($tree.getFlattened(0)) }}</span>
		</div>
	</div>
</div>

<xf:macro id="navigation_list" arg-children="!" arg-depth="1">
	<xf:foreach loop="$children" value="$child">
		<xf:macro id="navigation_list_entry" arg-navigation="{$child.record}" arg-children="{$child.children}" arg-depth="{$depth}" />
	</xf:foreach>
</xf:macro>

<xf:macro id="navigation_list_entry" arg-navigation="!" arg-children="!" arg-depth="1">
	<xf:if is="$depth == 1">
		<xf:datarow rowtype="subsection">
			<xf:cell href="{{ link('admin-navigation/edit', $navigation) }}" hash="{$navigation.navigation_id}">
				<div class="dataList-textRow">
					<xf:if is="{$navigation.icon}"><xf:fa icon="{$navigation.icon} fa-fw" /></xf:if>
					{$navigation.title}
					<xf:if is="{$navigation.link}"><span class="dataList-hint" dir="auto">{$navigation.link}</span></xf:if>
				</div>
			</xf:cell>
			<xf:cell class="dataList-cell--min dataList-cell--hint">{$navigation.display_order}</xf:cell>
			<xf:cell>&nbsp;</xf:cell>
			<xf:delete href="{{ link('admin-navigation/delete', $navigation) }}" />
		</xf:datarow>
	<xf:else />
		<xf:datarow>
			<xf:cell href="{{ link('admin-navigation/edit', $navigation) }}"
				class="dataList-cell--d{{ $depth - 1 }}"
				hash="{$navigation.navigation_id}">

				<div class="dataList-textRow">
					<xf:if is="$navigation.icon"><xf:fa icon="{$navigation.icon}" /></xf:if>
					{$navigation.title}
					<xf:if is="{$navigation.link}"><span class="dataList-hint" dir="auto">{$navigation.link}</span></xf:if>
				</div>
			</xf:cell>
			<xf:cell class="dataList-cell--min dataList-cell--hint">{$navigation.navigation_id} / {$navigation.display_order}</xf:cell>
			<xf:popup class="dataList-cell--action u-hideMedium"
				label="{{ phrase('add...') }}">

				<div class="menu" data-menu="menu" aria-hidden="true">
					<div class="menu-content">
						<h3 class="menu-header">{{ phrase('add...') }}</h3>
						<a href="{{ link('admin-navigation/add', null, {'parent_navigation_id': $navigation.parent_navigation_id}) }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('sibling') }}</a>
						<a href="{{ link('admin-navigation/add', null, {'parent_navigation_id': $navigation.navigation_id}) }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('child') }}</a>
					</div>
				</div>
			</xf:popup>
			<xf:delete href="{{ link('admin-navigation/delete', $navigation) }}" />
		</xf:datarow>
	</xf:if>
	<xf:macro id="navigation_list" arg-children="{$children}" arg-depth="{{ $depth + 1 }}" />
</xf:macro>