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

<xf:macro template="public:nestable_macros" name="setup" />

<xf:form action="{{ link('navigation/sort') }}" class="block" ajax="true">
	<div class="block-container">
		<div class="block-body">
			<div class="nestable-container" data-xf-init="nestable" data-parent-id="">
				<xf:macro name="navigation_list" arg-children="{$navTree}" />
				<xf:hiddenval name="navigation" value="" />
			</div>
		</div>
		<xf:submitrow icon="save" rowtype="simple" />
	</div>
</xf:form>

<xf:macro name="navigation_list" arg-children="!">
	<ol class="nestable-list">
		<xf:foreach loop="$children" key="$id" value="$child">
			<xf:macro name="navigation_list_entry" arg-nav="{$child.record}" arg-children="{$child.children}" />
		</xf:foreach>
	</ol>
</xf:macro>

<xf:macro name="navigation_list_entry" arg-nav="!" arg-children="!">
	<li class="nestable-item" data-id="{$nav.navigation_id}">
		<div class="nestable-handle" aria-label="{{ phrase('drag_handle')|for_attr }}"><xf:fa icon="fa-bars" /></div>
		<div class="nestable-content">{$nav.title}</div>
		<xf:if is="$children is not empty">
			<xf:macro name="navigation_list" arg-children="{$children}" />
		</xf:if>
	</li>
</xf:macro>