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

<xf:page option="breadcrumbPath" value="styles" />
<xf:breadcrumb href="{{ link('styles/templates', $style, {'type': $template.type}) }}">{$style.title} - {{ phrase('templates') }}</xf:breadcrumb>

<xf:pageaction if="$template.isUpdate() AND $template.style_id == $style.style_id">
	<xf:if is="$style.style_id">
		<xf:button href="{{ link('templates/compare', $template) }}" data-xf-click="overlay" data-cache="false">{{ phrase('view_custom_changes') }}</xf:button>
		<xf:button href="{{ link('templates/delete', $template, {'_xfRedirect': $redirect}) }}" overlay="true">{{ phrase('revert') }}</xf:button>
	<xf:else />
		<xf:button href="{{ link('templates/delete', $template, {'_xfRedirect': $redirect}) }}" icon="delete" overlay="true" />
	</xf:if>
</xf:pageaction>

<xf:form action="{{ link('templates/save', $template) }}" ajax="true" class="block">

	<xf:hiddenval name="style_id">{$style.style_id}</xf:hiddenval>

	<div class="block-container">

		<xf:radiotabs name="type" value="{$template.type}" readonly="{$template.isUpdate()}">
			<xf:initialhtml>
				<xf:macro template="style_macros" name="style_change_menu"
					arg-styleTree="{$styleTree}"
					arg-currentStyle="{$style}"
					arg-route="{{ $template.isInsert() ? 'styles/add-template' : 'styles/edit-template' }}"
					arg-routeParams="{{ {'template_id': {$template.template_id}, 'type': {$template.type}} }}"
					arg-linkClass="tabs-tab" />
				<span class="tabs-tab is-readonly">{{ phrase('type:') }}</span>
			</xf:initialhtml>
			<xf:option value="public">{$types.public}</xf:option>
			<xf:option value="email">{$types.email}</xf:option>
			<xf:option value="admin">{$types.admin}</xf:option>
		</xf:radiotabs>

		<div class="block-body" data-xf-init="code-editor-switcher-container" data-template-suffix-mode="1">

			<xf:textboxrow name="title" value="{$template.title}" class="js-codeEditorSwitcher formRow--noLabel"
				rowtype="fullWidth"
				maxlength="{{ max_length($template, 'title') }}"
				autofocus="autofocus"
				autocomplete="off"
				label="{{ phrase('template_name') }}"
				hint="{{ phrase('must_be_unique') }}"
				dir="ltr" />

			<xf:codeeditorrow name="template" value="{$template.template}"
				mode="html"
				rows="12"
				rowtype="fullWidth noLabel"
				rowclass="js-codeEditorContainer"
				data-submit-selector=".js-submitButton"
				label="{{ phrase('template') }}"
				explain="{{ phrase('you_may_use_xenforo_template_syntax_here') }}">
				<xf:finalhtml>
					<xf:if is="$hasHistory">
						<div class="js-historyTarget toggleTarget" data-href="trigger-href"></div>
					</xf:if>
				</xf:finalhtml>
			</xf:codeeditorrow>

			<xf:if is="!$style.style_id">
				<xf:macro template="addon_macros" name="addon_edit" arg-addOnId="{$template.addon_id}" />
			<xf:else />
				<xf:hiddenval name="addon_id">{$template.addon_id}</xf:hiddenval>
			</xf:if>
		</div>

		<xf:submitrow icon="save" class="js-submitButton"
			data-ajax-redirect="{{ ($template.isInsert() || $template.style_id != $style.style_id) ? '1' : '0' }}">
			<xf:html>
				<xf:button type="submit" name="exit" icon="save">{{ phrase('save_and_exit') }}</xf:button>
				<xf:if is="$hasHistory">
					<xf:button href="{{ link('templates/history', $template) }}" class="blockLink" icon="history"
						data-xf-click="toggle"
						data-target=".js-historyTarget">{{ phrase('view_history') }}</xf:button>
				</xf:if>
			</xf:html>
		</xf:submitrow>
	</div>
	<xf:redirect />
</xf:form>