<xf:if is="$reaction.isInsert()">
	<xf:title>{{ phrase('add_reaction') }}</xf:title>
<xf:else />
	<xf:title>{{ phrase('edit_reaction:') }} {$reaction.title}</xf:title>
</xf:if>

<xf:pageaction if="$reaction.isUpdate()">
	<xf:button href="{{ link('reactions/delete', $reaction) }}" icon="delete" overlay="true" />
</xf:pageaction>

<xf:form action="{{ link('reactions/save', $reaction) }}" ajax="true" class="block">
	<div class="block-container">
		<div class="block-body">

			<xf:textboxrow name="title" value="{$reaction}"
				label="{{ phrase('title') }}"/>

			<xf:set var="$explain">{{ phrase('reaction_text_color_explain') }}</xf:set>
			<xf:macro id="public:color_picker_macros::color_picker"
				arg-name="text_color"
				arg-value="{$reaction.text_color}"
				arg-allowPalette="true"
				arg-colorData="{$colorData}"
				arg-label="{{ phrase('text_color') }}"
				arg-explain="{$explain}" />

			<xf:radiorow name="reaction_score" value="{$reaction}" label="{{ phrase('reaction_score') }}">
				<xf:options source="{$reactionScores}" />
				<xf:option label="{{ phrase('custom_score') }}" value=""
					selected="{$reaction.is_custom_score}">
					<xf:numberbox name="custom_reaction_score" value="{$reaction.reaction_score}" step="1" />
				</xf:option>
			</xf:radiorow>

			<hr class="formRowSep" />

			<xf:macro id="display_order_macros::row" arg-value="{$reaction}" />

			<xf:checkboxrow>
				<xf:option name="active" selected="$reaction.active"
					label="{{ phrase('reaction_is_active') }}"
					hint="{{ phrase('reaction_active_hint') }}" />
			</xf:checkboxrow>

			<hr class="formRowSep" />

			<xf:textboxrow name="emoji_shortname" value="{$reaction}"
				label="{{ phrase('emoji_replacement') }}"
				hint="{{ phrase('optional') }}"
				explain="{{ phrase('enter_emoji_or_emoji_short_name_such_as_smile_to_use_as_reaction') }}"
				data-xf-init="emoji-completer" data-exclude-smilies="true" data-insert-emoji="true" />

			<xf:assetuploadrow name="image_url" value="{$reaction}" asset="reactions"
				label="{{ phrase('image_replacement_url') }}"
				hint="{{ phrase('optional') }}" />

			<xf:assetuploadrow name="image_url_2x" value="{$reaction}" asset="reactions"
				hint="{{ phrase('optional') }}"
				label="{{ phrase('2x_image_replacement_url') }}"
				explain="{{ phrase('2x_image_replacement_url_explain') }}" />

			<xf:checkboxrow label="{{ phrase('sprite_mode') }}">
				<xf:option name="sprite_mode" selected="$reaction.sprite_mode"
					label="{{ phrase('enable_sprite_mode_with_following_parameters') }}"
					data-hide="true" data-xf-init="disabler" data-container=".js-reactionSpriteOptions" />
			</xf:checkboxrow>

			<div class="js-reactionSpriteOptions">
				<xf:formrow rowtype="input"
					label="{{ phrase('sprite_dimensions') }}">

					<div class="inputGroup">
						<xf:numberbox name="sprite_params[w]" value="{$reaction.sprite_params.w}" min="1"
							title="{{ phrase('width')|for_attr }}"
							data-xf-init="tooltip" />
						<span class="inputGroup-text">x</span>
						<xf:numberbox name="sprite_params[h]" value="{$reaction.sprite_params.h}" min="1"
							title="{{ phrase('height')|for_attr }}"
							data-xf-init="tooltip" />
						<span class="inputGroup-text">{{ phrase('units_pixels') }}</span>
					</div>
				</xf:formrow>

				<xf:formrow rowtype="input"
					label="{{ phrase('sprite_position') }}">

					<div class="inputGroup">
						<xf:numberbox name="sprite_params[x]" value="{$reaction.sprite_params.x}"
							title="{{ phrase('background_position_x')|for_attr }}"
							data-xf-init="tooltip" />
						<span class="inputGroup-text">x</span>
						<xf:numberbox name="sprite_params[y]" value="{$reaction.sprite_params.y}"
							title="{{ phrase('background_position_y')|for_attr }}"
							data-xf-init="tooltip" />
						<span class="inputGroup-text">{{ phrase('units_pixels') }}</span>
					</div>
					<div class="formRow-explain">{{ phrase('reaction_sprite_params_explain') }}</div>
				</xf:formrow>

				<xf:textboxrow name="sprite_params[bs]" value="{$reaction.sprite_params.bs}"
					label="{{ phrase('background_size') }}"
					explain="{{ phrase('background_size_explain') }}"
					dir="ltr" />
			</div>
		</div>

		<xf:submitrow sticky="true" icon="save" />
	</div>
</xf:form>