<xf:if is="$property.isInsert()">
	<xf:title>{{ phrase('add_property') }}</xf:title>
<xf:else />
	<xf:title>{{ phrase('edit_property:') }} {$property.master_title}</xf:title>
</xf:if>

<xf:pageaction if="$property.isUpdate()">
	<xf:button href="{{ link('style-properties/delete', $property) }}" icon="delete" overlay="true" />
</xf:pageaction>

<xf:form action="{{ link('style-properties//save', $property) }}" ajax="true" class="block">
	<div class="block-container">
		<div class="block-body">
			<xf:formrow label="{{ phrase('style') }}">

				{$style.title}
				<xf:hiddenval name="style_id">{$style.style_id}</xf:hiddenval>
			</xf:formrow>

			<xf:textboxrow name="property_name" value="{$property.property_name}"
				maxlength="{{ max_length($property, 'property_name') }}"
				label="{{ phrase('property_name') }}"
				explain="{{ phrase('this_is_how_you_will_refer_to_property_in_template') }}"
				dir="ltr" />

			<xf:textboxrow name="title" value="{$property.master_title}"
				maxlength="{{ max_length($property, 'title') }}"
				label="{{ phrase('title') }}" />

			<xf:textarearow name="description" value="{$property.master_description}" autosize="true"
				maxlength="{{ max_length($property, 'description') }}"
				label="{{ phrase('description') }}" />

			<hr class="formRowSep" />

			<xf:radiorow name="property_type" value="{{ $property.property_type ?: 'css' }}"
				label="{{ phrase('type') }}">

				<xf:option value="css" data-xf-init="disabler" data-container=".js-propertyTypeCss" data-hide="true">
					CSS</xf:option>
				<xf:option value="value" data-xf-init="disabler" data-container=".js-propertyTypeValue" data-hide="true">
					{{ phrase('value') }}</xf:option>

			</xf:radiorow>

			<div class="js-propertyTypeCss">
				<xf:checkboxrow name="css_components" value="{{ $property.css_components }}" listclass="listColumns"
					label="{{ phrase('css_components') }}">

					<xf:option value="text">{{ phrase('text') }}</xf:option>
					<xf:option value="background">{{ phrase('background') }}</xf:option>
					<xf:option value="border">{{ phrase('border') }}</xf:option>
					<xf:option value="border_radius">{{ phrase('border_radius') }}</xf:option>
					<xf:option value="border_width_simple">{{ phrase('simple_border_width') }}</xf:option>
					<xf:option value="border_color_simple">{{ phrase('simple_border_color') }}</xf:option>
					<xf:option value="border_radius_simple">{{ phrase('simple_border_radius') }}</xf:option>
					<xf:option value="padding">{{ phrase('padding') }}</xf:option>
					<xf:option value="extra">{{ phrase('extra') }}</xf:option>
					<xf:explain>{{ phrase('css_components_explain') }}</xf:explain>
				</xf:checkboxrow>
			</div>
			<div class="js-propertyTypeValue">
				<xf:radiorow name="value_type" value="{{ $property.value_type ?: 'string' }}" listclass="listColumns"
					label="{{ phrase('value_type') }}">

					<xf:option value="string">{{ phrase('string') }}</xf:option>
					<xf:option value="color">{{ phrase('color') }}</xf:option>
					<xf:option value="unit">{{ phrase('unit') }}</xf:option>
					<xf:option value="number">{{ phrase('number') }}</xf:option>
					<xf:option value="boolean">{{ phrase('boolean') }}</xf:option>
					<xf:option value="radio">{{ phrase('radio_buttons') }}</xf:option>
					<xf:option value="select">{{ phrase('select_menu') }}</xf:option>
					<xf:option value="template">{{ phrase('template') }}</xf:option>
				</xf:radiorow>

				<xf:textarearow name="value_parameters" value="{$property.value_parameters}" autosize="true"
					label="{{ phrase('value_formatting_parameters') }}"
					code="true" />

				<xf:textboxrow name="depends_on" value="{$property.depends_on}"
					maxlength="{{ max_length($property, 'depends_on') }}"
					label="{{ phrase('depends_on') }}"
					explain="{{ phrase('depends_on_explain') }}"
					dir="ltr" />

				<xf:textboxrow name="value_group" value="{$property.value_group}"
					maxlength="{{ max_length($property, 'value_group') }}"
					label="{{ phrase('value_grouping') }}"
					explain="{{ phrase('value_grouping_explain') }}"
					dir="ltr" />
			</div>

			<hr class="formRowSep" />

			<xf:selectrow name="group_name" value="{$property.group_name}"
				label="{{ phrase('group') }}">
				<xf:option value="">&nbsp;</xf:option>
				<xf:foreach loop="$groups" value="$group">
					<xf:option value="{$group.group_name}">{$group.title}</xf:option>
				</xf:foreach>
			</xf:selectrow>

			<xf:macro template="display_order_macros" name="row"
				arg-value="{$property.display_order}" />

			<xf:if is="$style.style_id == 0">
				<xf:macro template="addon_macros" name="addon_edit" arg-addOnId="{$property.addon_id}" />
			</xf:if>
		</div>
		<xf:submitrow icon="save" sticky="true" />
	</div>
</xf:form>