<xf:if is="$field.isInsert()">
	<xf:title>{{ phrase('add_field') }}</xf:title>
<xf:else />
	<xf:title>{{ phrase('edit_field:') }} {$field.title|htmlspecialchars}</xf:title>
</xf:if>

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

<xf:js src="xf/sort.js, vendor/dragula/dragula.js"/>
<xf:css src="public:dragula.less"/>

<xf:form action="{{ link($prefix . '/save', $field) }}" ajax="true" class="block">
	<div class="block-container">
		<div class="block-body">
			<xf:if is="{{ $field.exists() }}">
				<xf:formrow label="{{ phrase('field_id') }}"
					explain="{{ phrase('this_is_unique_identifier_for_field_cannot_be_changed') }}">
					<span class="u-ltr">{$field.field_id}</span>
				</xf:formrow>
			<xf:else />
				<xf:textboxrow name="field_id" id="ctrl_field_id" maxlength="{{ max_length($field, 'field_id') }}"
					label="{{ phrase('field_id') }}"
					explain="{{ phrase('this_is_unique_identifier_for_field_cannot_be_changed') }}"
					dir="ltr" />
			</xf:if>

			<hr class="formRowSep" />

			<xf:textboxrow name="title" value="{{ $field.exists() ? $field.MasterTitle.phrase_text : '' }}"
				label="{{ phrase('title') }}" />

			<xf:textarearow name="description" value="{{ $field.exists() ? $field.MasterDescription.phrase_text : '' }}"
				autosize="true"
				label="{{ phrase('description') }}"
				hint="{{ phrase('you_may_use_html') }}" />

			<hr class="formRowSep" />

			<xf:radiorow name="display_group" value="{$field.display_group}"
				label="{{ phrase('display_location') }}">
				<xf:options source="$displayGroups" />
			</xf:radiorow>

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

			{$displayOptions|raw}

			<hr class="formRowSep" />

			<xf:radiorow name="field_type" value="{$field.field_type}" listclass="listColumns"
				label="{{ phrase('field_type') }}">

				<xf:foreach loop="$fieldTypes"
					key="$fieldType"
					value="$fieldDef"
					if="!$existingType || $fieldDef.compatible == $existingType.compatible">

					<xf:option class="{$fieldDef.type}" value="{$fieldType}">{$fieldDef.label}</xf:option>
				</xf:foreach>
			</xf:radiorow>
		</div>

		<xf:if is="!$existingType || $existingType.options == 'text'">
			<h3 class="block-formSectionHeader">
				<span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up:next">
					<span class="block-formSectionHeader-aligner">{{ phrase('options_for_text_fields') }}</span>
				</span>
			</h3>
			<div class="block-body block-body--collapsible">
				<xf:radiorow name="match_type" value="{$field.match_type}" listclass="_listColumns"
					label="{{ phrase('value_match_requirements') }}"
					hint="{{ phrase('empty_values_always_allowed') }}">

					<xf:option value="none">{$matchTypes.none}</xf:option>
					<xf:option value="number" data-hide="true"
						label="{$matchTypes.number}">
						<xf:dependent><xf:macro name="number_dependent" arg-field="{$field}" /></xf:dependent>
					</xf:option>
					<xf:option value="alphanumeric">{$matchTypes.alphanumeric}</xf:option>
					<xf:option value="email">{$matchTypes.email}</xf:option>
					<xf:option value="url">{$matchTypes.url}</xf:option>
					<xf:option value="color">{$matchTypes.color}</xf:option>
					<xf:option value="date" data-hide="true"
						label="{$matchTypes.date}">
						<xf:dependent><xf:macro name="date_dependent" arg-field="{$field}" /></xf:dependent>
					</xf:option>
					<xf:option value="regex" data-hide="true"
						label="{$matchTypes.regex}">
						<xf:dependent><xf:macro name="regex_dependent" arg-field="{$field}" /></xf:dependent>
					</xf:option>
					<xf:option value="callback"  data-hide="true"
						label="{$matchTypes.callback}">
						<xf:dependent>
							<xf:macro template="helper_callback_fields" name="callback_fields"
								arg-className="match_params[callback_class]"
								arg-methodName="match_params[callback_method]"
								arg-classValue="{$field.match_params.callback_class}"
								arg-methodValue="{$field.match_params.callback_method}"
								arg-size="23" />
							<p class="formRow-explain">
								<code>
									<em>\XF\CustomField\Definition</em> $definition,
									&amp;$value,
									&amp;$error
								</code>
							</p>
						</xf:dependent>
					</xf:option>
					<xf:option value="validator" data-hide="true"
						label="{$matchTypes.validator}">
						<xf:dependent><xf:macro name="validator_dependent" arg-field="{$field}" /></xf:dependent>
					</xf:option>
				</xf:radiorow>

				<hr class="formRowSep" />

				<xf:numberboxrow name="max_length" value="{$field.max_length}" min="0"
					label="{{ phrase('maximum_length') }}" />
			</div>
		</xf:if>

		<xf:if is="!$existingType || $existingType.options == 'choice'">
			<h3 class="block-formSectionHeader">
				<span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up:next">
					<span class="block-formSectionHeader-aligner">{{ phrase('options_for_choice_fields') }}</span>
				</span>
			</h3>
			<div class="block-body block-body--collapsible">
				<xf:formrow rowtype="input"
					label="{{ phrase('possible_choices') }}"
					explain="{{ phrase('value_represents_internal_value_for_choice_text_is_displayed') }}">

					<div class="inputGroup-container" data-xf-init="list-sorter" data-drag-handle=".dragHandle">
						<xf:foreach loop="$field.field_choices" key="$choice" value="$text">
							<div class="inputGroup">
								<span class="inputGroup-text dragHandle"
									aria-label="{{ phrase('drag_handle')|for_attr }}"></span>
								<xf:textbox name="field_choice[]" value="{$choice}"
									placeholder="{{ phrase('value_a_z_0_9_and_only') }}"
									size="24" maxlength="25"
									dir="ltr" />
								<span class="inputGroup-splitter"></span>
								<xf:textbox name="field_choice_text[]" value="{$text}"
									placeholder="{{ phrase('text') }}" size="24" />
							</div>
						</xf:foreach>
						<div class="inputGroup is-undraggable js-blockDragafter" data-xf-init="field-adder"
							data-remove-class="is-undraggable js-blockDragafter">
							<span class="inputGroup-text dragHandle"
								aria-label="{{ phrase('drag_handle')|for_attr }}"></span>
							<xf:textbox name="field_choice[]"
								placeholder="{{ phrase('value_a_z_0_9_and_only') }}"
								size="24" maxlength="25" data-i="0"
								dir="ltr" />
							<span class="inputGroup-splitter"></span>
							<xf:textbox name="field_choice_text[]"
								placeholder="{{ phrase('text') }}"
								size="24" data-i="0" />
						</div>
					</div>
				</xf:formrow>
			</div>
		</xf:if>

		<h3 class="block-formSectionHeader">
			<span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up:next">
				<span class="block-formSectionHeader-aligner">{{ phrase('general_options') }}</span>
			</span>
		</h3>
		<div class="block-body block-body--collapsible">
			<xf:if is="$extraOptions is not empty">
				{$extraOptions|raw}

				<hr class="formRowSep" />
			</xf:if>

			<xf:codeeditorrow name="display_template" value="{$field.display_template}"
				mode="html" data-line-wrapping="true"
				class="codeEditor--autoSize"
				label="{{ phrase('value_display_html') }}"
				explain="{{ phrase('field_display_html_description', {'fieldId': $field.field_id}) }}" />

			<xf:if is="$hasWrapperTemplate">
				<xf:codeeditorrow name="wrapper_template" value="{$field.wrapper_template}"
					mode="html" data-line-wrapping="true"
					class="codeEditor--autoSize"
					label="{{ phrase('wrapper_display_html') }}"
					explain="{{ phrase('wrapper_template_html_description', {'fieldId': $field.field_id}) }}" />
			</xf:if>
		</div>

		<xf:submitrow sticky="true" icon="save" />
	</div>
</xf:form>

<xf:macro name="number_dependent" arg-field="!">
	<div class="inputGroup inputGroup--numbers">
		<xf:numberbox name="match_params[number_min]" value="{$field.match_params.number_min}" size="5"
			class="input--numberNarrow"
			placeholder="{{ phrase('minimum') }}" />
		&nbsp;
		<xf:numberbox name="match_params[number_max]" value="{$field.match_params.number_max}" size="5"
			class="input--numberNarrow"
			placeholder="{{ phrase('maximum') }}" />
	</div>
	<xf:checkbox>
		<xf:option name="match_params[number_integer]" selected="{$field.match_params.number_integer}">{{ phrase('field_definition_require_whole_number') }}</xf:option>
	</xf:checkbox>
</xf:macro>

<xf:macro name="regex_dependent" arg-field="!">
	<xf:textbox name="match_params[regex]" value="{$field.match_params.regex}"
		placeholder="{{ phrase('regular_expression') }}"
		code="true" />
</xf:macro>

<xf:macro name="validator_dependent" arg-field="!">
	<xf:textbox name="match_params[validator]" value="{$field.match_params.validator}"
		placeholder="{{ phrase('validator') }}"
		dir="ltr" />
</xf:macro>

<xf:macro name="date_dependent" arg-field="!">
	<xf:radio name="match_params[date_constraint]" value="{{ $field.match_params.date_constraint ?: '' }}">
		<xf:option value="past">{{ phrase('field_definition_require_past_date') }}</xf:option>
		<xf:option value="future">{{ phrase('field_definition_require_future_date') }}</xf:option>
		<xf:option value="">{{ phrase('any') }}</xf:option>
	</xf:radio>
</xf:macro>