<xf:title>{{ phrase('styles') }}</xf:title>

<xf:pageaction>
	<xf:button href="{{ link('styles/add') }}" icon="add">{{ phrase('add_style') }}</xf:button>
	<xf:button href="{{ link('styles/import') }}" icon="import" />
</xf:pageaction>

<xf:macro id="style_list" arg-children="!" arg-defaultStyleId="!" arg-depth="1" arg-canSupportStyleArchives="{{ false }}">
	<xf:if is="$children is not empty">
		<xf:foreach loop="$children" value="$child">
			<xf:macro id="style_list_entry"
				arg-style="{$child.record}"
				arg-children="{$child.children}"
				arg-defaultStyleId="{$defaultStyleId}"
				arg-depth="{$depth}"
				arg-canSupportStyleArchives="{$canSupportStyleArchives}" />
		</xf:foreach>
	</xf:if>
</xf:macro>

<xf:macro id="style_list_entry" arg-style="!" arg-children="!" arg-defaultStyleId="!" arg-depth="1" arg-canSupportStyleArchives="{{ false }}">
	<xf:datarow>

		<xf:main
			hash="{$style.style_id}"
			href="{{ ($style.style_id ? link('styles/edit', $style) : '') }}"
			label="{$style.title}"
			explain="{$style.description}"
			class="dataList-cell--d{$depth}">

			<xf:hint><xf:if is="$xf.designer AND $style.designer_mode">
				{{ phrase('designer_mode_enabled:') }} {$style.designer_mode}
			</xf:if></xf:hint>
		</xf:main>

		<xf:if is="$style.style_id">
			<xf:toggle name="user_selectable[{$style.style_id}]"
				selected="$style.user_selectable"
				class="dataList-cell--separated u-hideMedium"
				submit="true"
				tooltip="{{ phrase('enable_disable_user_selection_x', {'title': $style.title}) }}" />
			<xf:toggle name="default_style_id"
				type="radio"
				value="{$style.style_id}"
				selected="{{ $defaultStyleId == $style.style_id ? 1 : 0 }}"
				class="dataList-cell--separated"
				submit="true" />
		<xf:else />
			<xf:cell class="u-hideMedium">&nbsp;</xf:cell>
			<xf:cell>&nbsp;</xf:cell>
		</xf:if>

		<xf:if is="$style.canEdit()">
			<xf:action href="{{ link('styles/templates', $style) }}" class="dataList-cell--responsiveMenuItem">{{ phrase('templates') }}</xf:action>
			<xf:action href="{{ link('styles/style-properties', $style) }}" class="dataList-cell--responsiveMenuItem">{{ phrase('style_properties') }}</xf:action>
		<xf:else />
			<xf:cell class="dataList-cell--alt dataList-cell--fauxResponsiveMenuItem"> </xf:cell>
			<xf:cell class="dataList-cell--alt dataList-cell--fauxResponsiveMenuItem">&nbsp;</xf:cell>
		</xf:if>

		<xf:if is="$style.style_id">
			<xf:popup label="&#8226;&#8226;&#8226;">
				<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="dataList">
					<div class="menu-content">
						<h3 class="menu-header">{{ phrase('more_options') }}</h3>
						<a href="{{ link('styles/export', $style) }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('export_as_xml') }}</a>
						<xf:if is="$canSupportStyleArchives">
							<a href="{{ link('styles/export-archive', $style) }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('export_as_archive') }}</a>
						</xf:if>
						<a href="{{ link('styles/customized-components', $style) }}" class="menu-linkRow">{{ phrase('customized_components') }}</a>
						<div class="js-menuBuilderTarget u-showMediumBlock"></div>
					</div>
				</div>
			</xf:popup>
		<xf:else />
			<xf:cell class="dataList-cell--alt">&nbsp;</xf:cell>
		</xf:if>

		<xf:if is="$style.style_id">
			<xf:delete href="{{ link('styles/delete', $style) }}" />
		<xf:else />
			<xf:cell class="dataList-cell--alt">&nbsp;</xf:cell>
		</xf:if>

	</xf:datarow>
	<xf:macro id="style_list"
		arg-children="{$children}"
		arg-depth="{{ $depth + 1 }}"
		arg-defaultStyleId="{$defaultStyleId}"
		arg-canSupportStyleArchives="{$canSupportStyleArchives}" />
</xf:macro>

<xf:if is="$styleTree is not empty">
	<xf:form action="{{ link('styles/toggle') }}" class="block" ajax="true">
		<div class="block-outer">
			<xf:macro id="filter_macros::quick_filter" arg-key="styles" arg-class="block-outer-opposite" />
		</div>
		<div class="block-container">
			<div class="block-body">
				<xf:datalist>
					<xf:macro id="style_list" arg-children="{$styleTree}"
						arg-defaultStyleId="{$xf.options.defaultStyleId}"
						arg-canSupportStyleArchives="{$canSupportStyleArchives}" />
				</xf:datalist>
			</div>
			<div class="block-footer">
				<span class="block-footer-counter">{{ display_totals($styleTree.getFlattened(0)) }}</span>
			</div>
		</div>
	</xf:form>
</xf:if>