<xf:title>{{ phrase('options:') }} {$addOn.title}</xf:title>

<xf:if is="$groups is not empty">
	<xf:form action="{{ link('options/update') }}" ajax="true" class="block">
		<div class="block-container">
			<xf:foreach loop="$groups" key="$groupId" value="$group">
				<xf:if is="{$groupedOptions.{$groupId}} is not empty">
					<h3 class="block-formSectionHeader">
						<span class="{{ $groups.count() > 1 ? 'collapseTrigger collapseTrigger--block' : '' }} is-active" data-xf-click="{{ $groups.count() > 1 ? 'toggle' : '' }}" data-target="< :up:next">
							{$group.title}
						</span>
						<span class="block-desc">
							{$group.description}
						</span>
					</h3>
					<div class="block-body {{ $groups.count() > 1 ? 'block-body--collapsible' : '' }} is-active">

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

						<xf:foreach loop="{$groupedOptions.{$groupId}}" 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 template="option_macros" name="option_row" arg-group="{$group}" arg-option="{$option}" arg-includeAddOnHint="{{ false }}" />
						</xf:foreach>
					</div>
				</xf:if>
			</xf:foreach>
			<xf:submitrow sticky="true" icon="save" />
		</div>
	</xf:form>
<xf:else />
	<div class="blockMessage">{{ phrase('no_items_have_been_created_yet') }}</div>
</xf:if>