<xf:if is="$style.isInsert()">
	<xf:title>{{ phrase('add_style') }}</xf:title>
<xf:else />
	<xf:title>{{ phrase('edit_style:') }} {$style.title}</xf:title>
</xf:if>

<xf:pageaction if="$style.isUpdate()">
	<xf:button href="{{ link('styles/delete', $style) }}" icon="delete" overlay="true" />
</xf:pageaction>

<xf:form action="{{ link('styles/save', $style) }}" ajax="true" class="block">
	<div class="block-container">
		<div class="block-body">
			<xf:textboxrow name="title" value="{$style}"
				label="{{ phrase('title') }}" />

			<xf:textarearow name="description" value="{$style}" autosize="true"
				label="{{ phrase('description') }}" />

			<xf:selectrow name="parent_id" value="{$style}"
				label="{{ phrase('parent_style') }}">
				<xf:option value="0">{{ phrase('(no_parent)') }}</xf:option>
				<xf:foreach loop="$styleTree.getFlattened(1)" value="$treeEntry">
					<xf:option value="{$treeEntry.record.style_id}">
						{{ repeat('--', $treeEntry.depth) }} {$treeEntry.record.title}
					</xf:option>
				</xf:foreach>
			</xf:selectrow>

			<xf:formrow label="{{ phrase('asset_locations') }}"
				explain="{{ phrase('asset_locations_explain') }}"
				rowtype="input"
				data-xf-init="admin-asset-editor">

				<ul class="listPlain inputGroup-container">
					<xf:foreach loop="$style.effective_assets" key="$key" i="$i" istart="-1" value="$path">
						<li class="inputGroup">
							<xf:textbox name="assets[{$i}][key]" placeholder="{{ phrase('asset_key') }}"
								value="{$key}"
								disabled="{{ ($style.isAssetInherited($key) OR $style.isAssetModified($key)) ? 'disabled' : '' }}" />
							<xf:hiddenval name="assets[{$i}][key]" class="js-assetKey" disabled="{{ !$style.isAssetModified($key) ? 'disabled' : '' }}">{$key}</xf:hiddenval>

							<span class="inputGroup-splitter"></span>

							<xf:textbox name="assets[{$i}][path]" placeholder="{{ phrase('asset_path') }}" class="js-assetValue"
								value="{$path}" data-parent-value="{{ $style.isAssetModified($key) ? $style.getParentAssetValue($key) : null }}"
								disabled="{{ $style.isAssetInherited($key) ? 'disabled' : '' }}" />

							<span class="inputGroup-splitter"></span>

							<xf:if is="$style.isAssetCustom($key)">
								<xf:button fa="fa-pencil" class="button--plain button--iconOnly button--adminStyleAsset is-disabled" />
							<xf:else />
								<xf:button
									class="button--plain button--icon button--iconOnly button--adminStyleAsset {{ $style.isAssetInherited($key) ? 'is-modify js-assetModify' : '' }} {{ ($style.isAssetModified($key)) ? 'is-revert js-assetModify' : '' }}"
									data-xf-init="tooltip" title="{{ $style.isAssetInherited($key) ? phrase('modify_in_this_style') : phrase('revert_value_to_parent') }}" />
							</xf:if>
						</li>
					</xf:foreach>

					<li class="inputGroup" data-xf-init="field-adder" data-increment-format="assets[{counter}]">
						<xf:textbox name="assets[{$nextCounter}][key]" placeholder="{{ phrase('asset_key') }}" />

						<span class="inputGroup-splitter"></span>

						<xf:textbox name="assets[{$nextCounter}][path]" placeholder="{{ phrase('asset_path') }}" />

						<span class="inputGroup-splitter"></span>

						<xf:button fa="fa-pencil" class="button--plain button--iconOnly button--adminStyleAsset is-disabled" />
					</li>
				</ul>
			</xf:formrow>

			<xf:checkboxrow>
				<xf:option name="enable_variations" selected="{$style.enable_variations}"
					hint="{{ phrase('enable_variations_hint') }}">
					{{ phrase('enable_variations') }}
				</xf:option>

				<xf:option name="user_selectable" selected="{$style.user_selectable}">
					{{ phrase('allow_user_selection') }}
				</xf:option>
			</xf:checkboxrow>
		</div>
		<xf:submitrow sticky="true" icon="save" />
	</div>
</xf:form>