<xf:title>{{ $group ? $group.title : phrase('ungrouped_properties') }}</xf:title>
<xf:if is="$group">
	<xf:description>{$group.description}</xf:description>
</xf:if>

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

<xf:breadcrumb href="{{ link('styles/style-properties', $style) }}">{$style.title} - {{ phrase('style_properties') }}</xf:breadcrumb>

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

	<xf:button href="{{ link('style-properties/groups/edit', $group) }}" data-xf-click="overlay">
		{{ phrase('edit') }}
	</xf:button>
</xf:pageaction>

<xf:if is="$propertyMap is not empty">
	<xf:form action="{{ link('styles/style-properties/group', $style, $urlParams) }}"
		class="block p-styleProperties"
		ajax="true"
		data-json-name="json" data-json-opt-in="properties,properties_listed"
		autocomplete="off">

		<div class="block-outer">
			<div class="block-outer-main">
				<xf:macro template="style_macros" name="style_change_menu"
					arg-styleTree="{$styleTree}"
					arg-currentStyle="{$style}"
					arg-route="styles/style-properties/group"
					arg-routeParams="{{ {'group': $group.group_name} }}" />

				<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('group:') }} {$group.title}</xf:button>
				<div class="menu" data-menu="menu" aria-hidden="true">
					<div class="menu-content">
						<h3 class="menu-header">{{ phrase('groups') }}</h3>
						<div class="menu-scroller">
							<xf:foreach loop="$groups" value="$_group">
								<a href="{{ link('styles/style-properties/group', $style, {'group': $_group.group_name}) }}"
									class="menu-linkRow {{ ($group && $group.group_name == $_group.group_name) ? 'is-selected' : '' }}">{$_group.title}</a>
							</xf:foreach>
							<xf:if is="$hasUngrouped">
								<a href="{{ link('styles/style-properties/group', $style, {'ungrouped': 1}) }}"
									class="menu-linkRow {{ !$group ? 'is-selected' : '' }}">
									{{ phrase('ungrouped_properties') }}</a>
							</xf:if>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="block-container">
			<xf:set var="$hasActive" value="{{ false }}" />
			<xf:if contentcheck="true">
				<div data-toggle-wrapper="1">
					<h3 class="block-header">
						<span class="collapseTrigger collapseTrigger--block is-active"
							data-xf-click="toggle"
							data-target="< :up :next"
							data-xf-init="toggle-storage"
							data-storage-key="sp-settings-{$group.group_name}">
							{{ phrase('settings') }}
						</span>
					</h3>
					<div class="block-body block-body--collapsible is-active">
					<xf:contentcheck>
						<xf:set var="$propValueGroup" value="{{ null }}" />
						<xf:foreach loop="$propertyMap" value="$map" if="{$map.Property.property_type} == 'value'">
							<xf:if is="$propValueGroup != $map.Property.value_group">
								<xf:if is="$map.Property.value_group_title">
									<div class="block-formSectionHeader">
										<span class="block-formSectionHeader-aligner">
											{$map.Property.value_group_title}
										</span>
									</div>
								<xf:else />
									<hr class="formRowSep" />
								</xf:if>
							</xf:if>
							<xf:macro template="style_property_macros" name="property_edit"
								arg-property="{$map.Property}"
								arg-definitionEditable="{{ $map.isDefinitionEditable() }}"
								arg-customizationState="{{ $map.getCustomizationState() }}" />
							<xf:set var="$hasActive" value="{{ true }}" />
							<xf:set var="$propValueGroup" value="{$map.Property.value_group}" />
						</xf:foreach>
					</xf:contentcheck>
					</div>
				</div>
			</xf:if>

			<xf:foreach loop="$propertyMap" value="$map" if="{$map.Property.property_type} == 'css'">
				<xf:macro template="style_property_macros" name="property_edit"
					arg-property="{$map.Property}"
					arg-definitionEditable="{{ $map.isDefinitionEditable() }}"
					arg-customizationState="{{ $map.getCustomizationState() }}"
					arg-isActive="{{ $hasActive ? false : true }}" />
				<xf:set var="$hasActive" value="{{ true }}" />
			</xf:foreach>

			<xf:submitrow rowtype="simple" icon="save" sticky="true" />
		</div>
	</xf:form>
<xf:else />
	<div class="blockMessage">{{ phrase('this_group_does_not_have_any_style_properties') }}</div>
</xf:if>

<xf:macro template="public:color_picker_macros" name="color_picker_scripts" arg-colorData="{$colorData}" />