<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}" id="js-templateModificationTemplate"
				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}"
				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}" 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}" 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}"
				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 id="addon_macros::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>
	const templateInput = document.querySelector('#js-templateModificationTemplate')
	const contents = document.querySelector('#js-templateContents')
	const container = contents.closest('.js-templateContentsContainer')
	const invalidContents = contents.innerHTML

	const updateContents = (templateName) =>
	{
		if (templateName === '')
		{
			XF.Transition.removeClassTransitioned(container, 'is-active')
			return
		}

		XF.ajax(
			'get',
			contents.getAttribute('data-contents-url'),
			{ template: templateName },
			(data) =>
			{
				if (data.template !== false)
				{
					contents.textContent = data.template
				}
				else
				{
					contents.innerHTML = invalidContents
				}

				XF.Transition.addClassTransitioned(container, 'is-active')
				XF.layoutChange()
			},
		)
	}

	if (templateInput.value)
	{
		updateContents(templateInput.value)
	}

	let timer

	templateInput.addEventListener('change', () =>
	{
		if (timer)
		{
			clearTimeout(timer)
		}
		timer = setTimeout(() =>
		{
			updateContents(templateInput.value)
		}, 200)
	})

	templateInput.addEventListener('AutoComplete', () =>
	{
		if (timer)
		{
			clearTimeout(timer)
		}
		timer = setTimeout(() =>
		{
			updateContents(templateInput.value)
		}, 200)
	})
</xf:js>