<xf:title>{$style.title} - {{ phrase('templates') }}</xf:title>

<xf:page option="breadcrumbPath" value="styles" />
<xf:page option="section" value="templates" />

<xf:pageaction>
	<xf:button href="{{ link('templates/add', null, {'style_id': $style.style_id, 'type': $type}) }}" icon="add"
		data-xf-click="prefix-grabber"
		data-filter-element="[data-xf-init~=filter]">
		{{ phrase('add_template') }}
	</xf:button>
</xf:pageaction>

<div class="block">
	<div class="block-outer">
		<div class="block-outer-main">
			<xf:macro template="style_macros" name="style_change_menu"
				arg-styleTree="{$styleTree}"
				arg-currentStyle="{$style}"
				arg-route="styles/templates"
				arg-routeParams="{$linkParams}" />

			<xf:macro template="addon_macros" name="addon_change_menu"
				arg-addOns="{$addOns}"
				arg-currentAddOn="{$currentAddOn}"
				arg-route="styles/templates"
				arg-routeData="{$style}"
				arg-routeParams="{$linkParams}" />
		</div>
		<xf:macro template="filter_macros" name="quick_filter"
			arg-key="templates"
			arg-ajax="{{ link('styles/templates', $style, $linkParams) }}"
			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('styles/templates', $style, {'type': $typeId} + $linkParams) }}"
					class="tabs-tab {{ $typeId == $type ? 'is-active' : '' }}">{$typeName}</a>
			</xf:foreach>
			</span>
		</h2>

		<xf:macro name="search_menu"
			arg-style="{$style}"
			arg-conditions="{{ {'type': $type, 'addon_id': $currentAddOn ? $currentAddOn.addon_id : '_any', 'state': ['default', 'inherited', 'custom']} }}" />

		<div class="block-body">
			<xf:datalist>
				<xf:macro name="template_list" arg-templates="{$templates}" arg-style="{$style}" />
				<xf:if is="$filter AND $total > $perPage">
					<xf:datarow rowclass="dataList-row--note dataList-row--noHover js-filterForceShow">
						<xf:cell colspan="2">{{ phrase('more_records_matching_filter_more_specific') }}</xf:cell>
					</xf:datarow>
				</xf:if>
			</xf:datalist>
		</div>

		<div class="block-footer">
			<span class="block-footer-counter">{{ display_totals($templates, $total) }}</span>
		</div>
	</div>

	<xf:pagenav
		page="{$page}" perpage="{$perPage}" total="{$total}"
		link="styles/templates"
		params="{$linkParams}"
		data="{$style}"
		wrapperclass="js-filterHide block-outer block-outer--after" />
</div>

<xf:macro name="template_list" arg-templates="!" arg-style="!">
	<xf:foreach loop="$templates" value="$template">
		<xf:datarow
			rowclass="{{ ($template.style_id == 0 ? '' : ($template.style_id == $style.style_id ? 'dataList-row--custom' : 'dataList-row--parentCustom')) }}">
			<xf:main href="{{ link('templates/edit', $template, {'style_id': $style.style_id}) }}"
				label="{$template.title}"
				hint="{{ ($template.addon_id && $template.addon_id != 'XF' && $template.AddOn) ? $template.AddOn.title : '' }}"
				colspan="{{ $template.style_id == $style.style_id ? 1 : 2 }}"
				hash="{$template.template_id}"
				dir="auto" />
			<xf:if is="$template.style_id == $style.style_id">
				<xf:delete href="{{ link('templates/delete', $template) }}"
					tooltip="{{ $template.style_id ? phrase('revert') : phrase('delete') }} " />
			</xf:if>
		</xf:datarow>
	</xf:foreach>
</xf:macro>

<xf:macro name="search_menu" arg-style="!" arg-conditions="!">
	<div class="block-filterBar">
		<div class="filterBar">
			<a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('refine_search') }}</a>
			<div class="menu menu--wide" data-menu="menu" aria-hidden="true"
				data-href="{{ link('templates/refine-search', null, {'style_id': $style.style_id} + $conditions) }}"
				data-load-target=".js-filterMenuBody">
				<div class="menu-content">
					<h4 class="menu-header">{{ phrase('refine_search') }}</h4>
					<div class="js-filterMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</xf:macro>