<xf:title>{{ phrase('merge_template_changes:') }} {$template.title}</xf:title>

<xf:css src="public:diff.less" />

<xf:form action="{{ link('templates/merge-outdated', $template) }}" id="js-mergeForm" class="block">
	<div class="block-container">
		<div class="block-body">
			<div class="block-row block-row--separated">
				<div class="diffListContainer" dir="ltr">
					<ol class="diffList diffList--code diffList--wrapped diffList--editable">
					<xf:foreach loop="$diffs" value="$diff">
						<xf:set var="$diffHtml" value="{$diff.1|escape|join('<br />')}" />
						<xf:if is="$diff.0 == 'c'">
							<li class="diffList-conflict js-conflictContainer">
								<xf:set var="$parentHtml" value="{$diff.3|escape|join('<br />')}" />
								<div class="diffList-line js-diffParent"><xf:trim>
									<xf:if is="$diff.3">
										<span>{{ trim($parentHtml) !== '' ? $parentHtml|raw : '&nbsp;' }}</span><xf:hiddenval name="" value="{$diff.3|join("
")}" />
									<xf:else />
										<i>{{ phrase('deleted') }}</i>
									</xf:if>
								</xf:trim></div>
								<div class="diffList-resolve">

									<xf:button class="js-resolveButton" data-target=".js-diffParent">
										&uarr; {{ phrase('resolve_using_parent_version') }}
									</xf:button>
									<xf:button class="js-resolveButton" data-target=".js-diffParent, .js-diffCustom">
										{{ phrase('resolve_using_both') }}
									</xf:button>
									<xf:button class="js-resolveButton" data-target=".js-diffCustom">
										{{ phrase('resolve_using_custom_version') }} &darr;
									</xf:button>

									<xf:hiddenval name="merged[]" class="js-mergedInput" value="{{ $diff.3|join("
") }}" />
								</div>
								<div class="diffList-line js-diffCustom"><xf:trim>
									<xf:if is="$diff.1">
										<span>{{ trim($diffHtml) !== '' ? $diffHtml|raw : '&nbsp;' }}</span><xf:hiddenval name="" value="{{ $diff.1|join("
") }}" />
									<xf:else />
										<i>{{ phrase('deleted') }}</i>
									</xf:if>
								</xf:trim></div>
							</li>
						<xf:else />
							<li class="diffList-line diffList-line--{$diff.0}"><xf:trim>
								<xf:if is="$diff.1">
									<span>{{ trim($diffHtml) !== '' ? $diffHtml|raw : '&nbsp;' }}</span><xf:hiddenval name="merged[]" value="{{ $diff.1|join("
") }}" />
								<xf:else />
									<i>{{ phrase('deleted') }}</i>
								</xf:if>
							</xf:trim></li>
						</xf:if>
					</xf:foreach>
					</ol>
				</div>
			</div>
			<div class="block-row block-row--separated">
				{{ phrase('you_may_click_on_update_to_edit_it') }}
			</div>
		</div>
		<xf:submitrow submit="{{ phrase('merge') }}" rowtype="simple" icon="save" />
	</div>
</xf:form>

<xf:js>
	//<script>
		$(function()
		{
			var $form = $('#js-mergeForm');
			var $buttons = $form.find('.js-resolveButton');
			if ($buttons.length)
			{
				$form.find(':submit').addClass('is-disabled').prop('disabled', true);
				$buttons.click(function()
				{
					var $this = $(this);
					var $container = $this.closest('.js-conflictContainer');
					var $hidden = $container.find('.js-mergedInput');
					var $target = $container.find($this.data('target'));
					var $firstTarget = $target.first();

					var $selectedInput = $target.find('input[type=hidden]');

					if (!$selectedInput.length)
					{
						// deleted, so need to rename the input so it doesn't get sent through
						$hidden.attr('name', '');
					}
					else if ($selectedInput.length > 1)
					{
						var val = [];
						$selectedInput.each(function() {
							val.push($(this).val());
						});
						$hidden.val(val.join("\n"));
					}
					else
					{
						$hidden.val($selectedInput.val());
					}

					$container.children().hide();
					$container.addClass('is-resolved');
					$firstTarget.addClass('is-chosen').show();
					if ($hidden.length)
					{
						$firstTarget.html($('<span />').text($hidden.val()).append('<br />'));
					}

					if (!$buttons.filter(':visible').length)
					{
						$form.find(':submit').removeClass('is-disabled').prop('disabled', false);
					}

					if ($target.length > 1)
					{
						$firstTarget.click();
					}
				});
			}

			$form.on('click', '.diffList-line--u, .diffList-conflict.is-resolved .is-chosen', function() {
				var $this = $(this),
					$html = $this.find('span'),
					$textarea = $this.find('textarea'),
					$input = $this.find('input[type=hidden]');

				if (!$html.length)
				{
					return; // nothing to edit
				}

				if (!$input.length || !$input.attr('name'))
				{
					$input = $this.closest('.js-conflictContainer').find('.js-mergedInput');
				}
				if (!$input)
				{
					return;
				}

				$html.hide();
				if (!$textarea.length)
				{
					$textarea = $('<textarea class="input" rows="1" />').val($input.val());
					$textarea.insertAfter($html);
					XF.Element.applyHandler($textarea, 'textarea-handler');

					$textarea.on('blur', function() {
						$input.val($textarea.val());
						$html.text($textarea.val()).append('<br>');
						$html.show();
						$textarea.hide();
					});
				}

				$textarea.show().focus();
			});
		});
	//</script>
</xf:js>