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

<xf:pageaction>
	<xf:if is="$canAdd">
		<xf:button href="{{ link('options/groups/add') }}" icon="add">{{ phrase('add_option_group') }}</xf:button>
	</xf:if>
	<xf:button class="acp--simple" data-xf-click="admin-toggle-advanced" data-value="1" data-url="{{ link('account/toggle-advanced') }}">{{ phrase('show_advanced_options') }}</xf:button>
</xf:pageaction>

<div class="block">
	<div class="block-outer">
		<xf:macro template="filter_macros" name="quick_filter" arg-key="options" arg-class="block-outer-opposite" />
	</div>
	<div class="block-container">
		<div class="block-body">
			<xf:datalist>
				<xf:foreach loop="$groups" value="$group">
					<xf:datarow
						icon="{{ $group.icon ?: 'fa-cogs' }}"
						label="{$group.title}"
						href="{{ link('options/groups', $group) }}"
						explain="{$group.description}"
						delete="{{ $group.canEdit() ? link('options/groups/delete', $group) : false }}"
						hash="{$group.group_id}"
						rowclass="{{ $group.advanced ? 'acp--advanced' : '' }}">

						<xf:if is="$group.canEdit()">
							<xf:action href="{{ link('options/groups/edit', $group) }}">{{ phrase('edit') }}</xf:action>
						</xf:if>
					</xf:datarow>
				</xf:foreach>
			</xf:datalist>
		</div>
		<div class="block-footer">
			<span class="block-footer-counter">{{ display_totals($groups) }}</span>
		</div>
	</div>
</div>