<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.reaction_id ? $reaction.MasterTitle.phrase_text : ''  }}"
				label="{{ phrase('title') }}"/>

			<xf:set var="$explain">{{ phrase('reaction_text_color_explain') }}</xf:set>
			<xf:macro template="public:color_picker_macros" name="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" label="{{ phrase('reaction_score') }}" value="{$reaction.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 template="display_order_macros" name="row"
				arg-value="{$reaction.display_order}" />

			<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:assetuploadrow name="image_url" value="{$reaction.image_url}"
				asset="reactions"
				maxlength="{{ max_length($reaction, 'image_url') }}"
				label="{{ phrase('image_replacement_url') }}"
				dir="ltr" />

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

			<xf:checkboxrow label="{{ phrase('sprite_mode') }}">
				<xf:option name="sprite_mode" selected="$reaction.sprite_mode"
					label="{{ phrase('enable_sprite_mode_with_following_parameters') }}" />
			</xf:checkboxrow>

			<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>

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

	</div>
</xf:form>