<xf:title>{{ phrase('customized_style_components:') }} {$style.title}</xf:title>

<xf:if is="$templates is not empty OR $properties is not empty">
	<xf:form action="{{ link('styles/mass-revert', $style) }}" ajax="true" class="block">
		<div class="block-outer">
			<div class="block-outer-main">
				<xf:macro id="style_macros::style_change_menu"
					arg-styleTree="{$styleTree}"
					arg-currentStyle="{$style}"
					arg-route="styles/customized-components" />
			</div>
			<div class="block-outer-opposite">
				<xf:macro id="filter_macros::quick_filter" arg-key="customized-components" arg-class="block-outer-opposite" />
			</div>
		</div>
		<div class="block-container">
			<div class="block-body">
				<xf:datalist>
					<xf:if is="$templates is not empty">
						<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover">
							<xf:cell>{{ phrase('templates') }}</xf:cell>
							<xf:cell class="dataList-cell--min"><xf:checkbox standalone="true"><xf:option check-all=".dataList .js-checkAllTemplates >" /></xf:checkbox></xf:cell>
						</xf:datarow>
						<xf:foreach loop="$templates" value="$template">
							<xf:datarow rowclass="js-checkAllTemplates">
								<xf:main href="{{ link('templates/edit', $template) }}"
									label="{$template.title}"
									hint="{{ $template.version_string ? phrase('customized_in_version', {'version': $template.version_string}) : '' }}" />
								<xf:toggle name="template_ids[]" value="{$template.template_id}" />
							</xf:datarow>
						</xf:foreach>
					</xf:if>
					<xf:if is="$properties is not empty">
						<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover">
							<xf:cell>{{ phrase('style_properties') }}</xf:cell>
							<xf:cell class="dataList-cell--min"><xf:checkbox standalone="true"><xf:option check-all=".dataList .js-checkAllProperties >" /></xf:checkbox></xf:cell>
						</xf:datarow>
						<xf:foreach loop="$properties" value="$property">
							<xf:datarow rowclass="js-checkAllProperties">
								<xf:main href="{{ link('styles/style-properties/group', $style, {'group': $property.group_name}) }}"
									label="{$property.title}"
									hint="{$property.property_name}" />
								<xf:toggle name="property_ids[]" value="{$property.property_id}" />
							</xf:datarow>
						</xf:foreach>
					</xf:if>
				</xf:datalist>
			</div>
			<div class="block-footer block-footer--split">
				<span class="block-footer-counter">{{ display_totals($itemCount) }}</span>
				<span class="block-footer-select"><xf:checkbox standalone="true"><xf:option check-all=".dataList >" label="{{ phrase('select_all') }}" /></xf:checkbox></span>
				<span class="block-footer-controls">
					<xf:button type="submit">{{ phrase('revert') }}</xf:button>
				</span>
			</div>
		</div>
	</xf:form>
<xf:else />
	<div class="block">
		<div class="block-outer">
			<xf:macro id="style_macros::style_change_menu"
				arg-styleTree="{$styleTree}"
				arg-currentStyle="{$style}"
				arg-route="styles/customized-components" />
		</div>
		<div class="block-container">
			<div class="block-body block-row">
				{{ phrase('style_contains_no_customized_templates_or_style_properties') }}
			</div>
		</div>
	</div>
</xf:if>