<xf:macro name="option_row" arg-group="" arg-option="!" arg-includeAddOnHint="{{ true }}" arg-forceShowAdvanced="{{ false }}">
	<xf:set var="$formatParams" value="{$option.formatParams}" />
	<xf:set var="$rowClass" value="{{ ($option.advanced AND !$forceShowAdvanced) ? 'acp--advanced' : '' }}" />
	<xf:set var="$inputName"><xf:macro name="input_name" arg-id="{$option.option_id}" /></xf:set>
	<xf:set var="$listedHtml">
		<xf:macro name="listed_html" arg-id="{$option.option_id}" />
	</xf:set>
	<xf:set var="$hintHtml"><xf:trim>
		<xf:if is="$option.canEdit()">
			<xf:macro name="option_edit_link" arg-group="{$group}" arg-option="{$option}" />
		</xf:if>
		<xf:if is="$includeAddOnHint AND $group AND $option.addon_id AND $option.addon_id != $group.addon_id AND $option.addon_id != 'XF'">
			<span class="formRow-hint-featured">
				<a href="{{ link('add-ons/options', $option.AddOn) }}">{$option.AddOn.title}</a>
			</span>
		</xf:if>
	</xf:trim></xf:set>
	<xf:set var="$explainHtml">{$option.explain}</xf:set>

	<span class="u-anchorTarget" id="{$option.option_id}"></span>

	<xf:if is="$option.edit_format == 'onoff'">
		<xf:checkboxrow hint="{$hintHtml}" rowclass="{$rowClass}">
			<xf:option name="{$inputName}" value="1" selected="$option.option_value == 1">
				<xf:label>{$option.title}</xf:label>
			</xf:option>
			<xf:explain>{$explainHtml}</xf:explain>
			<xf:finalhtml>{$listedHtml}</xf:finalhtml>
		</xf:checkboxrow>
	<xf:elseif is="$option.edit_format == 'onofftextbox'" />
		<xf:checkboxrow hint="{$hintHtml}" rowclass="{$rowClass}">
			<xf:option name="{$inputName}[{$formatParams.onoff}]" value="1" selected="{$option.option_value.{$formatParams.onoff}}">
				<xf:label>{$option.title}</xf:label>
				<xf:dependent>
					<xf:if is="{$formatParams.type} == 'spinbox'">
						<xf:numberbox name="{$inputName}[{$formatParams.value}]" value="{{ $option.option_value.{$formatParams.onoff} ? $option.option_value.{$formatParams.value} : $formatParams.default|nl2nl }}" min="{$formatParams.min}" max="{$formatParams.max}" step="{$formatParams.step}" data-step="{$formatParams.stepOverride}" units="{$formatParams.units}" />
					<xf:elseif is="{$formatParams.type} == 'textarea'" />
						<xf:textarea name="{$inputName}[{$formatParams.value}]" value="{{ $option.option_value.{$formatParams.onoff} ? $option.option_value.{$formatParams.value} : $formatParams.default|nl2nl }}" maxlength="{$formatParams.maxlength}" rows="{$formatParams.rows}" autosize="true" />
					<xf:else />
						<xf:textbox name="{$inputName}[{$formatParams.value}]" value="{{ $option.option_value.{$formatParams.onoff} ? $option.option_value.{$formatParams.value} : $formatParams.default|nl2nl }}" placeholder="{$formatParams.placeholder}" maxlength="{$formatParams.maxlength}" />
					</xf:if>
				</xf:dependent>
			</xf:option>
			<xf:explain>{$explainHtml}</xf:explain>
			<xf:finalhtml>{$listedHtml}</xf:finalhtml>
		</xf:checkboxrow>
	<xf:elseif is="$option.edit_format == 'radio'" />
		<xf:radiorow name="{$inputName}" value="{$option.option_value}" rowclass="{$rowClass}">
			<xf:options source="{$formatParams}" />
			<xf:label>{$option.title}</xf:label>
			<xf:hint>{$hintHtml}</xf:hint>
			<xf:explain>{$explainHtml}</xf:explain>
			<xf:finalhtml>{$listedHtml}</xf:finalhtml>
		</xf:radiorow>
	<xf:elseif is="$option.edit_format == 'select'" />
		<xf:selectrow name="{$inputName}" value="{$option.option_value}" rowclass="{$rowClass}">
			<xf:options source="{$formatParams}" />
			<xf:label>{$option.title}</xf:label>
			<xf:hint>{$hintHtml}</xf:hint>
			<xf:explain>{$explainHtml}</xf:explain>
			<xf:finalhtml>{$listedHtml}</xf:finalhtml>
		</xf:selectrow>
	<xf:elseif is="$option.edit_format == 'checkbox'" />
		<xf:checkboxrow rowclass="{$rowClass}">
			<xf:foreach loop="$formatParams" key="$name" value="$text">
				<xf:option name="{$inputName}[{$name}]" selected="{$option.option_value.{$name}}">{$text}</xf:option>
			</xf:foreach>
			<xf:label>{$option.title}</xf:label>
			<xf:hint>{$hintHtml}</xf:hint>
			<xf:explain>{$explainHtml}</xf:explain>
			<xf:finalhtml>{$listedHtml}</xf:finalhtml>
		</xf:checkboxrow>
	<xf:elseif is="$option.edit_format == 'spinbox'" />
		<xf:numberboxrow name="{$inputName}" value="{$option.option_value}" rowclass="{$rowClass}"
			min="{$formatParams.min}" max="{$formatParams.max}" step="{$formatParams.step}" data-step="{$formatParams.stepOverride}" units="{$formatParams.units}"
			label="{$option.title}"
			hint="{$hintHtml}"
			explain="{$explainHtml}"
			finalhtml="{$listedHtml}" />
	<xf:elseif is="$option.edit_format == 'callback'" />
		<xf:set var="$includeHtml">{{ $option.renderDisplayCallback({
				'explainHtml': $explainHtml,
				'hintHtml': $hintHtml,
				'listedHtml': $listedHtml,
				'inputName': $inputName,
				'rowClass': $rowClass
			})|raw }}</xf:set>
		<xf:if is="$includeHtml is empty">
			<xf:formrow rowclass="{$rowClass}">
				<div class="blockMessage blockMessage--error blockMessage--iconic">
					DEBUG: {{ $option.getDisplayCallbackError() }}
					{$hintHtml}
				</div>
			</xf:formrow>
		<xf:else />
			{$includeHtml}
		</xf:if>
	<xf:elseif is="$option.edit_format == 'template'" />
		<xf:set var="$includeHtml"><xf:include template="{$formatParams.template}" /></xf:set>
		<xf:if is="$includeHtml is empty">
			<xf:formrow rowclass="{$rowClass}">
				<div class="blockMessage blockMessage--error blockMessage--iconic">
					DEBUG: Template {$formatParams.template} not found.
					{$hintHtml}
				</div>

			</xf:formrow>
		<xf:else />
			{$includeHtml}
		</xf:if>
	<xf:elseif is="$option.edit_format == 'textbox' && $formatParams.rows && $formatParams.rows > 1" />
		<xf:textarearow name="{$inputName}" value="{$option.option_value}" rows="{$formatParams.rows}" autosize="true" class="{$formatParams.class}" rowclass="{$rowClass}">
			<xf:label>{$option.title}</xf:label>
			<xf:hint>{$hintHtml}</xf:hint>
			<xf:explain>{$explainHtml}</xf:explain>
			<xf:finalhtml>{$listedHtml}</xf:finalhtml>
		</xf:textarearow>
	<xf:elseif is="$option.edit_format == 'textbox'" />
		<xf:textboxrow name="{$inputName}" value="{$option.option_value}" type="{$formatParams.type}" class="{$formatParams.class}" rowclass="{$rowClass}">
			<xf:label>{$option.title}</xf:label>
			<xf:hint>{$hintHtml}</xf:hint>
			<xf:explain>{$explainHtml}</xf:explain>
			<xf:finalhtml>{$listedHtml}</xf:finalhtml>
		</xf:textboxrow>
	<xf:elseif is="$option.edit_format == 'username'" />
		<xf:set var="$singleUsername" value="{{ true }}" />
		<xf:if is="$option.isDataTypeNumeric()">
			<xf:set var="$user" value="{$xf.app.em.find('XF:User', $option.option_value)}" />
			<xf:set var="$value" value="{$user.username}" />
		<xf:elseif is="$option.data_type == 'array'" />
			<xf:set var="$users" value="{{ $xf.app.em.getRepository('XF:User').getUsersByIdsOrdered(is_array($option.option_value) ? $option.option_value : []) }}" />
			<xf:set var="$value" value="{$users.pluckNamed('username')|join(', ')}" />
			<xf:set var="$singleUsername" value="{{ false }}" />
		<xf:else />
			<xf:set var="$value" value="{$option.option_value}" />
		</xf:if>

		<xf:if is="$singleUsername">
			<xf:textboxrow name="{$inputName}" value="{$value}" ac="single" autocomplete="off" rowclass="{$rowClass}"
				maxlength="{{ max_length($xf.visitor, 'username') }}">
				<xf:label>{$option.title}</xf:label>
				<xf:hint>{$hintHtml}</xf:hint>
				<xf:explain>{$explainHtml}</xf:explain>
				<xf:finalhtml>{$listedHtml}</xf:finalhtml>
			</xf:textboxrow>
		<xf:else />
			<xf:tokeninputrow name="{$inputName}" value="{$value}" href="{{ link('users/find') }}" rowclass="{$rowClass}"
				explain="{{ phrase('separate_names_with_comma') }}">

				<xf:label>{$option.title}</xf:label>
				<xf:hint>{$hintHtml}</xf:hint>
				<xf:explain>{$explainHtml}</xf:explain>
				<xf:finalhtml>{$listedHtml}</xf:finalhtml>
			</xf:tokeninputrow>
		</xf:if>
	<xf:else />
		<xf:formrow>
			<div class="blockMessage blockMessage--error blockMessage--iconic">
				DEBUG: Unknown edit format {$option.edit_format}.
				{$hintHtml}
			</div>
		</xf:formrow>
	</xf:if>
</xf:macro>

<xf:macro name="input_name" arg-id="!">options[{$id}]</xf:macro>

<xf:macro name="listed_html" arg-id="!"><xf:hiddenval name="options_listed[]">{$id}</xf:hiddenval></xf:macro>

<xf:macro name="option_edit_link" arg-group="" arg-option="!">
	<xf:if is="$group">
		{{ $option.advanced ? '(adv)' : '' }} {$option.option_id} {$option.Relations.{$group.group_id}.display_order|parens}
	</xf:if>
	<a href="{{ link('options/edit', $option, $group ? {'group_id': $group.group_id} : {}) }}"
		title="{$option.option_id}{{ $group ? ' / ' . {$option.Relations.{$group.group_id}.display_order} : '' }}"
		data-xf-init="tooltip"
	>{{ phrase('edit') }}</a>
</xf:macro>

<xf:macro name="option_form" arg-group="" arg-options="!" arg-formClass="" arg-forceShowAdvanced="{{ true }}">
	<xf:form action="{{ link('options/update') }}" ajax="true" class="{$formClass}">
		<xf:foreach loop="$options" value="$option">
			<xf:macro  name="option_row" arg-group="{$group}" arg-option="{$option}" arg-forceShowAdvanced="{$forceShowAdvanced}" />
		</xf:foreach>
		<xf:submitrow sticky="true" icon="save" />
	</xf:form>
</xf:macro>

<xf:macro name="option_form_block" arg-group="" arg-options="!" arg-containerBeforeHtml="" arg-forceShowAdvanced="{{ true }}">

	<xf:set var="$hundred" value="0" />

	<xf:if is="$options is not empty">
		<xf:form action="{{ link('options/update') }}" ajax="true" class="block">
			<div class="block-container">
				{$containerBeforeHtml|raw}
				<div class="block-body">
					<xf:foreach loop="$options" value="$option">

						<xf:if is="$group">
							<xf:set var="$curHundred" value="{{ floor($option.Relations.{$group.group_id}.display_order / 100) }}" />
							<xf:if is="{{ $curHundred > $hundred }}">
								<xf:set var="$hundred" value="{$curHundred}" />
								<hr class="formRowSep" />
							</xf:if>
						</xf:if>

						<xf:macro name="option_row" arg-group="{$group}" arg-option="{$option}" arg-forceShowAdvanced="{$forceShowAdvanced}" />
					</xf:foreach>
				</div>
				<xf:submitrow sticky="true" icon="save" />
			</div>

			<xf:if is="!$forceShowAdvanced">
				<xf:set var="$advancedCount" value="{{ 0 }}" />
				<xf:foreach loop="$options" value="$option" if="$option.advanced"><xf:set var="$advancedCount" value="{{ $advancedCount + 1 }}" /></xf:foreach>
				<xf:if is="$advancedCount > 0">
					<div class="block-outer block-outer--after acp--simple">
						<div class="block-outer-middle block-outer-hint">
							{{ phrase('x_advanced_options_hidden', {'count': {$advancedCount|number}}) }}
							<a tabindex="0" role="button" data-xf-click="admin-toggle-advanced" data-value="1" data-url="{{ link('account/toggle-advanced') }}">{{ phrase('show_them') }}</a>
						</div>
					</div>
				</xf:if>
			</xf:if>
		</xf:form>
	</xf:if>
</xf:macro>