<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.title}" maxlength="{{ max_length($smilie, 'title') }}"
				label="{{ phrase('title') }}" />
			<xf:textarearow name="smilie_text" value="{$smilie.smilie_text}" autosize="true"
				label="{{ phrase('text_to_replace') }}"
				explain="{{ phrase('enter_multiple_values_to_replace_on_separate_lines') }}" />

			<xf:assetuploadrow name="image_url" value="{$smilie.image_url}"
				asset="smilies"
				maxlength="{{ max_length($smilie, 'image_url') }}"
				label="{{ phrase('image_replacement_url') }}"
				dir="ltr" />

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

			<hr class="formRowSep" />

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

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

			<xf:macro template="display_order_macros" name="row"
				arg-value="{$smilie.display_order}" />

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

			<hr class="formRowSep" />

			<xf:checkboxrow label="{{ phrase('sprite_mode') }}">
				<xf:option name="sprite_mode" selected="$smilie.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="{$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>

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

	</div>
</xf:form>