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

<xf:macro id="public:nestable_macros::setup" />

<xf:form action="{{ link('smilies/sort') }}" class="block" ajax="true">
	<div class="block-container">
		<xf:foreach loop="$smilieData.smilieCategories" key="$smilieCategoryId" value="$smilieCategory">
			<xf:if is="{{ $smilieCategoryId > 0 }}">
				<h4 class="block-minorHeader">{$smilieCategory.title}</h4>
			<xf:else />
				<h4 class="block-minorHeader">{{ phrase('smilie_category_title.uncategorized') }}</h4>
			</xf:if>
			<div class="block-body">
				<div class="nestable-container" data-xf-init="nestable" data-parent-id="{$smilieCategoryId}" data-max-depth="1" data-value-target=".js-smilieData">
					<xf:if contentcheck="true">
						<ol class="nestable-list">
							<xf:contentcheck>
							<xf:foreach loop="{$smilieData.smilies.{$smilieCategoryId}}" key="$smilieId" value="$smilie" i="$i">
								<li class="nestable-item" data-id="{$smilieId}">
									<div class="nestable-handle nestable-handle--full" aria-label="{{ phrase('drag_handle')|for_attr }}"><xf:fa icon="fa-bars" /></div>
									<div class="nestable-content">{{ smilie($smilie.smilie_text_options.0) }} {$smilie.title} <xf:foreach loop="$smilie.smilie_text_options" value="$smilieText"><span class="smilieText">{$smilieText}</span> </xf:foreach></div>
								</li>
							</xf:foreach>
							</xf:contentcheck>
						</ol>
					</xf:if>
					<xf:hiddenval name="smilies[]" value="" class="js-smilieData" />
				</div>
			</div>
		</xf:foreach>
		<xf:submitrow icon="save" rowtype="simple" />
	</div>
</xf:form>