<xf:if is="$smilie.isInsert()">
	<xf:title>{{ phrase('add_smilie') }}</xf:title>
<xf:else />
	<xf:title>{{ phrase('edit_smilie:') }} {$smilie.title}</xf:title>
</xf:if>

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

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

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

			<xf:textarearow name="smilie_text" value="{$smilie}" autosize="true"
				label="{{ phrase('text_to_replace') }}"
				explain="{{ phrase('enter_multiple_values_to_replace_on_separate_lines') }}" />

			<hr class="formRowSep" />

			<xf:textboxrow name="emoji_shortname" value="{$smilie.emoji}"
				dir="ltr"
				autocomplete="off"
				maxlength="{{ max_length($smilie, 'emoji_shortname') }}"
				label="{{ phrase('emoji_replacement') }}"
				hint="{{ phrase('optional') }}"
				explain="{{ phrase('enter_emoji_or_emoji_short_name_such_as_smile_which_will_replace') }}"
				data-xf-init="emoji-completer" data-exclude-smilies="true" data-insert-emoji="true" />

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

			<xf:assetuploadrow name="image_url_2x" value="{$smilie}" asset="smilies"
				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="$smilie.sprite_mode"
					label="{{ phrase('enable_sprite_mode_with_following_parameters') }}"
					data-hide="true" data-xf-init="disabler" data-container=".js-smilieSpriteOptions" />
			</xf:checkboxrow>

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

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

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

			<hr class="formRowSep" />

			<xf:selectrow name="smilie_category_id" value="{$smilie}"
				label="{{ phrase('smilie_category') }}">

				<xf:option value="0" label="{{ phrase('(none)') }}" />
				<xf:options source="{$smilieCategories}" />
			</xf:selectrow>

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

			<xf:checkboxrow>
				<xf:option name="display_in_editor" selected="$smilie.display_in_editor"
					label="{{ phrase('show_this_smilie_in_the_text_editor') }}"
					explain="{{ phrase('hidden_smilies_hint') }}" />
			</xf:checkboxrow>
		</div>

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