<xf:if is="$modification.isInsert()">
	<xf:title>{{ phrase('add_template_modification') }}</xf:title>
<xf:else />
	<xf:title>{{ phrase('edit_template_modification:') }} {$modification.template}</xf:title>
</xf:if>

<xf:css src="template_modification.less" />

<xf:if is="!$modification.canEdit()">
	<div class="blockMessage blockMessage--important blockMessage--iconic">
		{{ phrase('only_limited_fields_in_item_may_be_edited') }}
	</div>
</xf:if>

<xf:pageaction if="$modification.isUpdate() && $modification.canEdit()">
	<xf:button href="{{ link('template-modifications/delete', $modification) }}" icon="delete" overlay="true" />
</xf:pageaction>

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

			<xf:formrow label="{{ phrase('template_modification_type') }}">
				{$types.{$modification.type}}
				<xf:hiddenval name="type">{$modification.type}</xf:hiddenval>
			</xf:formrow>

			<xf:textboxrow name="template" value="{$modification.template}" id="js-templateModificationTemplate"
				maxlength="{{ max_length($modification, 'template') }}"
				readonly="{{ !$modification.canEdit() }}"
				ac="single"
				data-acurl="{{ link('template-modifications/auto-complete', null, {'type': $modification.type}) }}"
				label="{{ phrase('template') }}"
				dir="ltr" />

			<xf:textboxrow name="modification_key" value="{$modification.modification_key}"
				maxlength="{{ max_length($modification, 'modification_key') }}"
				readonly="{{ !$modification.canEdit() }}"
				label="{{ phrase('modification_key') }}"
				explain="{{ phrase('this_is_used_to_uniquely_identify_modification_across_add_on_upgrades') }}"
				dir="ltr" />

			<xf:textboxrow name="description" value="{$modification.description}" readonly="{{ !$modification.canEdit() }}"
				label="{{ phrase('description') }}" />

			<hr class="formRowSep" />

			<div class="js-templateContentsContainer u-hidden u-hidden--transition">
				<xf:formrow rowtype="input"
					label="{{ phrase('template_contents') }}">

					<pre class="templateModContents"
						id="js-templateContents"
						data-contents-url="{{ link('template-modifications/contents', '', {'type': $modification.type}) }}"
					><!--
						--><i>{{ phrase('requested_template_not_found') }}</i><!--
					--></pre>
				</xf:formrow>
			</div>

			<xf:radiorow name="action" value="{$modification.action}" readonly="{{ !$modification.canEdit() }}"
				label="{{ phrase('search_type') }}">

				<xf:option value="str_replace"
					label="{{ phrase('simple_replacement') }}" />
				<xf:option value="preg_replace"
					label="{{ phrase('regular_expression') }}"
					hint="{{ phrase('search_text_must_contain_delimiters_modifiers_for_regex') }}" />
				<xf:option value="callback"
					label="{{ phrase('php_callback') }}"
					hint="{{ phrase('search_text_must_be_full_regular_expression') }}" />
			</xf:radiorow>

			<xf:codeeditorrow name="find" value="{$modification.find}" mode="html"
				readonly="{{ !$modification.canEdit() }}"
				class="codeEditor--short"
				data-auto-close-tags="false"
				label="{{ phrase('find') }}" />

			<xf:codeeditorrow name="replace" value="{$modification.replace}" mode="html"
				readonly="{{ !$modification.canEdit() }}"
				class="codeEditor--short"
				data-auto-close-tags="false"
				label="{{ phrase('replace') }}"
				explain="{{ phrase('template_modification_replace_description') }}" />

			<hr class="formRowSep" />

			<xf:numberboxrow name="execution_order" value="{$modification.execution_order}" min="0"
				readonly="{{ !$modification.canEdit() }}"
				label="{{ phrase('execution_order') }}" />

			<xf:checkboxrow>
				<xf:option name="enabled" value="1" selected="$modification.enabled"
					hint="{{ ($xf.development AND $modification.addon_id) ? phrase('field_value_maintained_addon_upgrade_explain') : '' }}">
					{{ phrase('automatically_apply_template_modification') }}
				</xf:option>
			</xf:checkboxrow>

			<xf:macro template="addon_macros" name="addon_edit" arg-addOnId="{$modification.addon_id}" />
		</div>
		<xf:submitrow sticky="true" icon="save"><xf:html>
			<xf:button type="submit" name="test" value="1">{{ phrase('test') }}</xf:button>
		</xf:html></xf:submitrow>
	</div>

</xf:form>

<xf:js>
	$(function() {
		var $templateInput = $('#js-templateModificationTemplate'),
				$contents = $('#js-templateContents'),
				$container = $contents.closest('.js-templateContentsContainer'),
				invalidContents = $contents.html();

		var updateContents = function(templateName)
		{
			if (templateName === '')
			{
				$container.removeClassTransitioned('is-active');
				return;
			}

			XF.ajax(
					'get',
					$contents.data('contents-url'),
					{ template: templateName },
					function(data)
					{
						if (data.template !== false)
						{
							$contents.text(data.template);
						}
						else
						{
							$contents.html(invalidContents);
						}

						$container.addClassTransitioned('is-active', function()
						{
							XF.layoutChange();
						});
					}
			);
		};

		if ($templateInput.val())
		{
			updateContents($templateInput.val());
		}

		var timer;

		$templateInput.on('change AutoComplete', function() {
			if (timer)
			{
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				updateContents($templateInput.val());
			}, 200);
		});
	});
</xf:js>