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

<xf:pageaction>
	<div class="buttonGroup">
		<xf:button href="{{ link('reactions/add') }}" icon="add">{{ phrase('add_reaction') }}</xf:button>
		<xf:button href="{{ link('reactions/sort') }}" icon="sort" overlay="true" />
	</div>
</xf:pageaction>

<xf:form action="{{ link('reactions/toggle') }}" ajax="true" class="block">
	<div class="block-outer">
		<xf:macro template="filter_macros" name="quick_filter" arg-key="reactions" arg-class="block-outer-opposite" />
	</div>
	<div class="block-container">

		<div class="block-body">
			<xf:datalist>
				<xf:foreach loop="$reactions" key="$reactionId" value="$reaction">
					<xf:datarow>
						<xf:cell href="{{ link('reactions/edit', $reaction) }}">
							<xf:reaction id="{$reaction}" showtitle="true" />
						</xf:cell>
						<xf:cell href="{{ link('reactions/edit', $reaction) }}">
							<span class="reactionScore">
								{$reaction.score_title}
								<xf:if is="$reaction.reaction_type == 'positive'">
									(+{$reaction.reaction_score})
								<xf:elseif is="$reaction.reaction_type == 'negative'" />
									({$reaction.reaction_score})
								</xf:if>
							</span>
						</xf:cell>
						<xf:if is="$reaction.canToggle()">
							<xf:toggle name="active[{$reaction.reaction_id}]" selected="$reaction.active"
								class="dataList-cell--separated" submit="true"
								tooltip="{{ phrase('enable_disable_x', {'title': $reaction.title}) }}" />
						<xf:else />
							<xf:cell class="dataList-cell--min dataList-cell--separated dataList-cell--alt" />
						</xf:if>
						<xf:if is="$reaction.canDelete()">
							<xf:delete href="{{ link('reactions/delete', $reaction) }}" />
						<xf:else />
							<xf:cell class="dataList-cell--min dataList-cell--alt" />
						</xf:if>
					</xf:datarow>
				<xf:else />
					<xf:datarow rowclass="dataList-row--noHover dataList-row--note">
						<xf:cell colspan="3" class="dataList-cell--noSearch">
							{{ phrase('no_reactions_have_been_added_yet') }}
						</xf:cell>
					</xf:datarow>
				</xf:foreach>
			</xf:datalist>
		</div>
		<div class="block-footer block-footer--split">
			<span class="block-footer-counter">{{ display_totals($reactions.count()) }}</span>
		</div>
	</div>
</xf:form>