<xf:macro id="quick_filter" arg-key="" arg-ajax="" arg-class="">
	<xf:js src="xf/filter.js" min="1" />
	<div class="{$class} quickFilter u-jsOnly" data-xf-init="filter" data-key="{$key}" data-ajax="{$ajax}">
		<div class="inputGroup inputGroup--inline inputGroup--joined">
			<input type="search" class="input js-filterInput" placeholder="{{ phrase('filter...') }}" data-xf-key="{{ phrase('shortcut.filter')|for_attr }}" />
			<span class="inputGroup-text">
				<xf:checkbox standalone="true">
					<xf:option class="js-filterPrefix" label="{{ phrase('prefix_search') }}" />
				</xf:checkbox>
			</span>
			<i class="inputGroup-text js-filterClear is-disabled" aria-hidden="true"></i>
		</div>
	</div>
</xf:macro>

<xf:macro id="filter_bar"
	arg-params="!"
	arg-content="{{ null }}"
	arg-route=""
	arg-displayValues="{{ [] }}"
	arg-phrases="{{ [] }}"
	arg-menu=""
	arg-menuIsRoute="{{ true }}"
	arg-menuParams="{{ [] }}"
	arg-menuTitle="{{ phrase('refine_search') }}">

	<xf:if contentcheck="true">
		<div class="block-filterBar">
			<div class="filterBar">
				<xf:contentcheck>

					<xf:if is="$route && $displayValues">
						<ul class="filterBar-filters">
							<xf:foreach loop="$displayValues" key="$filterName" value="$displayValue">
								<xf:set var="$lookupName" value="key:{$filterName}" />
								<xf:set var="$displayName">{{ $phrases.{$lookupName} ?: $filterName }}</xf:set>

								<li><a href="{{ link($route, $content, $params + {'_skipFilter': $filterName}) }}" class="filterBar-filterToggle">
									<xf:if is="$displayValue === true">
										{$displayName}
									<xf:else />
										<span class="filterBar-filterToggle-label">{$displayName}</span>
										<xf:if is="is_array($displayValue)">
											<xf:foreach loop="$displayValue" value="$_displayValue">
												<xf:set var="$v"><xf:macro id="lookup" arg-value="{$_displayValue}" arg-phrases="{$phrases}" /></xf:set>
												<span class="filterBar-filterToggle-value" data-xf-init="tooltip" title="{$v}">{$v}</span>
											</xf:foreach>
										<xf:else />
											<xf:set var="$v"><xf:macro id="lookup" arg-value="{$displayValue}" arg-phrases="{$phrases}" /></xf:set>
											<span class="filterBar-filterToggle-value" data-xf-init="tooltip" title="{$v}">{$v}</span>
										</xf:if>
									</xf:if>
								</a></li>
							</xf:foreach>
						</ul>
					</xf:if>

					<xf:if is="$menu">
						<a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{$menuTitle}</a>
						<xf:set var="$menuLink" value="{{ $menuIsRoute ? link($menu, $content, $params + $menuParams) : $menu }}" />
						<div class="menu menu--wide" data-menu="menu" aria-hidden="true"
							data-href="{$menuLink}"
							data-load-target=".js-filterMenuBody">
							<div class="menu-content">
								<h4 class="menu-header">{$menuTitle}</h4>
								<div class="js-filterMenuBody">
									<div class="menu-row">{{ phrase('loading...') }}</div>
								</div>
							</div>
						</div>
					</xf:if>

				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:macro>

<xf:macro id="lookup" arg-value="!" arg-phrases="{{ [] }}"><xf:trim>
	<xf:if is="is_scalar($value) AND {$phrases.{$value}}">
		{{ $phrases.{$value} }}
	<xf:else />
		{$value}
	</xf:if>

</xf:trim></xf:macro>