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

<xf:form action="{{ link('smilies/import') }}" ajax="true" data-json-name="json" class="js-stickyParent">
	<xf:foreach loop="$smilies" key="$i" value="$smilie">
		<div class="block">
			<div class="block-container">
				<div class="block-body">
					<xf:macro id="smilie" arg-smilie="{$smilie}" arg-i="{$i}" />
				</div>
			</div>
		</div>
	</xf:foreach>

	<div class="block">
		<div class="block-container">
			<xf:submitrow icon="import" />
		</div>
	</div>

	<xf:foreach loop="$newCategories" key="$newCategoryId" value="$newCategory">
		<xf:hiddenval name="categories[{$newCategoryId}][title]">{$newCategory.title}</xf:hiddenval>
		<xf:hiddenval name="categories[{$newCategoryId}][display_order]">{$newCategory.display_order}</xf:hiddenval>
	</xf:foreach>
</xf:form>

<xf:macro id="smilie" arg-smilie="!" arg-i="!" global="true">
	<xf:formrow>
		<div>
			<xf:if is="$smilie.sprite_mode">
				<img src="{{ transparent_img() }}" alt="" class="smilie smilie--sprite" style="{{ $smilie.getSpriteCss() }}" />
			<xf:elseif is="$smilie.image_url" />
				<img src="{$smilie.image_url}" class="smilie" alt="" />
			<xf:else />
				<span style="font-size: 1.2em">{$smilie.emoji|emoji}</span>
			</xf:if>
		</div>
		<xf:checkbox standalone="true">
			<xf:option name="import[]" value="{$i}" selected="true"
				data-xf-init="disabler" data-hide="true" data-container=".js-importSmilie{$i}">
				{{ phrase('import_this_smilie') }}
			</xf:option>
		</xf:checkbox>
	</xf:formrow>

	<div class="js-importSmilie{$i}">
		<hr class="formRowSep" />

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

		<xf:textarearow name="smilies[{$i}][smilie_text]" value="{$smilie.smilie_text}" autosize="true"
			label="{{ phrase('text_to_replace') }}" />

		<xf:if is="$uploadMode">
			<h3 class="block-formSectionHeader">
				<span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target=".js-importSmilie{$i}Advanced">
					<span class="block-formSectionHeader-aligner">{{ phrase('more_options') }}</span>
				</span>
			</h3>
		</xf:if>

		<div class="js-importSmilie{$i}Advanced {{ $uploadMode ? 'u-hidden u-hidden--transition' : '' }}">

			<xf:if is="!$uploadMode">
				<hr class="formRowSep" />
			</xf:if>

			<xf:textboxrow name="smilies[{$i}][image_url]" value="{$smilie.image_url}"
				label="{{ phrase('image_replacement_url') }}"
				hint="{{ phrase('optional') }}" />

			<xf:textboxrow name="smilies[{$i}][image_url_2x]" value="{$smilie.image_url_2x}"
				label="{{ phrase('2x_image_replacement_url') }}"
				hint="{{ phrase('optional') }}"
				explain="{{ phrase('2x_image_replacement_url_explain') }}" />

			<xf:textboxrow name="smilies[{$i}][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-no-smilies="true" data-insert-emoji="true" />

			<xf:if is="$uploadMode">
				<xf:checkboxrow label="{{ phrase('sprite_mode') }}">

					<xf:option name="smilies[{$i}][sprite_mode]" selected="$smilie.sprite_mode">
						{{ phrase('enable_sprite_mode_with_following_parameters') }}
					</xf:option>
				</xf:checkboxrow>

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

					<div class="inputGroup">
						<xf:numberbox name="smilies[{$i}][sprite_params][w]" value="{$smilie.sprite_params.w}"
							min="1"
							title="{{ phrase('width') }}"
							data-xf-init="tooltip" />
						<span class="inputGroup-splitter"></span>
						<xf:numberbox name="smilies[{$i}][sprite_params][h]" value="{$smilie.sprite_params.h}"
							min="1"
							title="{{ phrase('height') }}"
							data-xf-init="tooltip" />
						<span class="inputGroup-text">px</span>
					</div>
				</xf:formrow>

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

					<div class="inputGroup">
						<xf:numberbox name="smilies[{$i}][sprite_params][x]" value="{$smilie.sprite_params.x}"
							title="{{ phrase('background_position_x') }}"
							data-xf-init="tooltip" />
						<span class="inputGroup-splitter"></span>
						<xf:numberbox name="smilies[{$i}][sprite_params][y]" value="{$smilie.sprite_params.y}"
							title="{{ phrase('background_position_y') }}"
							data-xf-init="tooltip" />
						<span class="inputGroup-text">px</span>
					</div>
				</xf:formrow>

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

			<hr class="formRowSep" />

			<xf:selectrow name="smilies[{$i}][smilie_category_id]"
				value="{{ $smilieCategoryMap.{$i} ?: 0 }}"
				label="{{ phrase('smilie_category') }}">

				<xf:option value="0" label="{{ phrase('(none)') }}" />
				<xf:optgroup label="{{ phrase('new') }}">
					<xf:options source="$newCategoryPairs" />
				</xf:optgroup>
				<xf:optgroup label="{{ phrase('existing') }}">
					<xf:options source="$categoryPairs" />
				</xf:optgroup>
			</xf:selectrow>

			<xf:macro id="display_order_macros::row"
				arg-name="smilies[{$i}][display_order]"
				arg-value="{$smilie.display_order}" />

			<xf:checkboxrow>
				<xf:option name="smilies[{$i}][display_in_editor]" selected="$smilie.display_in_editor">
					{{ phrase('show_this_smilie_in_the_text_editor') }}
				</xf:option>
			</xf:checkboxrow>

		</div>
	</div>
</xf:macro>