<xf:macro name="style_change_menu"
	arg-styleTree="!"
	arg-route="!"
	arg-routeParams="{{ {} }}"
	arg-currentStyle="{{ null }}"
	arg-linkClass="button button--link">

	<a class="{$linkClass} menuTrigger"
		data-xf-click="menu"
		role="button"
		tabindex="0"
		aria-expanded="false"
		aria-haspopup="true">{{ phrase('style:') }} {$currentStyle.title}</a>

	<div class="menu" data-menu="menu" aria-hidden="true">
		<div class="menu-content">
			<h3 class="menu-header">{{ phrase('styles') }}</h3>
			<xf:foreach loop="$styleTree.getFlattened()" value="$treeEntry">
				<a href="{{ link($route, $treeEntry.record, $routeParams) }}"
					class="menu-linkRow {{ ($currentStyle && $currentStyle.style_id == $treeEntry.record.style_id) ? 'is-selected' : '' }}">
					<span class="u-depth{$treeEntry.depth}">{$treeEntry.record.title}</span>
				</a>
			</xf:foreach>
		</div>
	</div>
</xf:macro>

<xf:macro name="style_select"
	arg-styleTree="!"
	arg-styleId="!"
	arg-name="style_id"
	arg-row="{{ true }}">

	<xf:set var="$select">
		<xf:select name="{$name}" value="{$styleId}">
			<xf:foreach loop="{{ $styleTree.getFlattened() }}" value="$treeEntry">
				<xf:option value="{$treeEntry.record.style_id}">{{ repeat('--', $treeEntry.depth) }} {$treeEntry.record.title}</xf:option>
			</xf:foreach>
		</xf:select>
	</xf:set>

	<xf:if is="$row">
		<xf:formrow rowtype="input"
			label="{{ phrase('style') }}">

			{$select|raw}
		</xf:formrow>
	<xf:else />
		{$select|raw}
	</xf:if>
</xf:macro>