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

<xf:page option="breadcrumbPath" value="styles" />
<xf:page option="section" value="styleProperties" />

<xf:pageaction if="$style.canEditStylePropertyDefinitions()">
	<xf:button href="{{ link('style-properties/groups/add', null, {'style_id': $style.style_id}) }}" icon="add">
		{{ phrase('add_property_group') }}
	</xf:button>
</xf:pageaction>

<div class="block">
	<div class="block-outer">
		<xf:macro template="style_macros" name="style_change_menu"
			arg-styleTree="{$styleTree}"
			arg-currentStyle="{$style}"
			arg-route="styles/style-properties" />
	</div>
	<div class="block-container">
		<div class="block-body">
			<xf:datalist>
				<xf:foreach loop="$groups" value="$group">
					<xf:set var="$canEdit" value="{{ $group.canEdit() && $group.style_id == $style.style_id }}" />
					<xf:datarow
						label="{$group.title}"
						href="{{ link('styles/style-properties/group', $style, {'group': $group.group_name}) }}"
						explain="{$group.description}"
						delete="{{ $canEdit ? link('style-properties/groups/delete', $group) : false }}"
						hash="{$group.group_name}"
						colspan="{{ $canEdit ? 1 : 3 }}">

						<xf:if is="$canEdit">
							<xf:action href="{{ link('style-properties/groups/edit', $group) }}">{{ phrase('edit') }}</xf:action>
						</xf:if>
					</xf:datarow>
				</xf:foreach>

				<xf:if is="$hasUngrouped">
					<xf:datarow
						label="{{ phrase('ungrouped_properties') }}"
						href="{{ link('styles/style-properties/group', $style, {'ungrouped': 1}) }}"
						colspan="3" />
				</xf:if>
			</xf:datalist>
		</div>
	</div>
</div>