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

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

<xf:form action="{{ link('reactions/sort') }}" class="block" ajax="true">
	<div class="block-container">
		<div class="block-body">
			<div class="nestable-container" data-xf-init="nestable" data-max-depth="1" data-value-function="serialize">
				<xf:macro id="reaction_list" arg-reactions="{$reactions}" />
				<xf:hiddenval name="reactions" value="" />
			</div>
		</div>
		<xf:submitrow icon="save" rowtype="simple" />
	</div>
</xf:form>

<xf:macro id="reaction_list" arg-reactions="!">
	<ol class="nestable-list">
		<xf:foreach loop="$reactions" key="$id" value="$reaction">
			<li class="nestable-item" data-id="{$id}">
				<div class="nestable-handle" aria-label="{{ phrase('drag_handle')|for_attr }}"><xf:fa icon="fa-bars" /></div>
				<div class="nestable-content">
					<xf:reaction id="{$reaction}" showtitle="true" small="true" />
				</div>
			</li>
		</xf:foreach>
	</ol>
</xf:macro>