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

<xf:page option="skipBreadcrumb" value="templateModifications" />

<xf:pageaction if="$canCreateModification">
	<xf:button href="{{ link('template-modifications/add', '', {'type': $type}) }}" icon="add">
		{{ phrase('add_template_modification') }}
	</xf:button>
</xf:pageaction>

<xf:css src="template_modification.less" />

<xf:form action="{{ link('template-modifications/toggle') }}" class="block" ajax="true">
	<div class="block-outer">
		<xf:macro id="filter_macros::quick_filter" arg-key="template-modifications" arg-class="block-outer-opposite" />
	</div>
	<div class="block-container">
		<h2 class="block-tabHeader tabs hScroller" data-xf-init="h-scroller">
			<span class="hScroller-scroll">
			<xf:foreach loop="$types" key="$typeId" value="$typeName">
				<a href="{{ link('template-modifications', '', {'type': $typeId}) }}"
					class="tabs-tab {{ $typeId == $type ? 'is-active' : '' }}">{$typeName}</a>
			</xf:foreach>
			</span>
		</h2>
		<xf:if is="$groupedModifications">
			<div class="block-body">
				<xf:datalist>
					<xf:foreach loop="$groupedModifications" key="$addOnId" value="$modifications">
						<tbody class="dataList-rowGroup">
							<xf:if is="$addOnId">
								<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover">
									<xf:cell colspan="4">{$addOns.{$addOnId}.title}</xf:cell>
								</xf:datarow>
								<xf:else />
								<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover">
									<xf:cell colspan="4">{{ phrase('custom_modifications') }}</xf:cell>
								</xf:datarow>
							</xf:if>
							<xf:foreach loop="$modifications" value="$modification">
								<xf:datarow
									label="{$modification.template}"
									hint="{$modification.description}"
									delete="{{ $modification.canEdit() ? link('template-modifications/delete', $modification) : null }}"
									href="{{ link('template-modifications/edit', $modification) }}">

									<xf:toggle name="enabled[{$modification.modification_id}]"
										selected="$modification.enabled"
										class="dataList-cell--separated" submit="true"
										tooltip="{{ phrase('enable_disable_x', {'title': $modification.modification_key}) }}" />

									<xf:action href="{{ link('template-modifications/log', $modification) }}" overlay="true">
										<span class="templateModApply templateModApply--ok{{ $modification.log_summary.ok ? ' is-active' : '' }}">{$modification.log_summary.ok}</span>
										/ <span class="templateModApply templateModApply--notFound{{ $modification.log_summary.not_found ? ' is-active' : '' }}">{$modification.log_summary.not_found}</span>
										/ <span class="templateModApply templateModApply--error{{ $modification.log_summary.error ? ' is-active' : '' }}">{$modification.log_summary.error}</span>
									</xf:action>
								</xf:datarow>
							</xf:foreach>
						</tbody>
					</xf:foreach>
				</xf:datalist>
			</div>
			<div class="block-footer">
				<span class="block-footer-counter">{{ display_totals($modificationCount) }}</span>
			</div>
		<xf:else />
			<div class="block-body block-row">{{ phrase('no_template_modifications_have_been_defined_yet') }}</div>
		</xf:if>
	</div>
</xf:form>