<xf:extends template="forum_view" />

<xf:extension name="thread_list_header">
	<h2 class="block-tabHeader tabs">
		<div class="hScroller" data-xf-init="h-scroller">
			<span class="hScroller-scroll">
				<!--[XF:type_tabs:start]-->
				<a href="{{ link('forums', $forum, $suggestionTabs.latest.filters) }}" class="tabs-tab {{ $suggestionTabs.latest.selected ? 'is-active' : '' }}">{{ phrase('latest_updates') }}</a>
				<a href="{{ link('forums', $forum, $suggestionTabs.popular.filters) }}" class="tabs-tab {{ $suggestionTabs.popular.selected ? 'is-active' : '' }}" rel="nofollow">{{ phrase('popular') }}</a>
				<a href="{{ link('forums', $forum, $suggestionTabs.newest.filters) }}" class="tabs-tab {{ $suggestionTabs.newest.selected ? 'is-active' : '' }}" rel="nofollow">{{ phrase('newest') }}</a>
				<xf:if is="$suggestionTabs.implemented">
					<a href="{{ link('forums', $forum, $suggestionTabs.implemented.filters) }}" class="tabs-tab {{ $suggestionTabs.implemented.selected ? 'is-active' : '' }}" rel="nofollow">{{ phrase('implemented') }}</a>
				</xf:if>
				<xf:if is="$suggestionTabs.yourSuggestions">
					<a href="{{ link('forums', $forum, $suggestionTabs.yourSuggestions.filters) }}" class="tabs-tab {{ $suggestionTabs.yourSuggestions.selected ? 'is-active' : '' }}" rel="nofollow">{{ phrase('your_suggestions') }}</a>
				</xf:if>
				<xf:if is="$suggestionTabs.yourVotes">
					<a href="{{ link('forums', $forum, $suggestionTabs.yourVotes.filters) }}" class="tabs-tab {{ $suggestionTabs.yourVotes.selected ? 'is-active' : '' }}" rel="nofollow">{{ phrase('your_votes') }}</a>
				</xf:if>
				<!--[XF:type_tabs:end]-->
			</span>
		</div>

		<div class="tabs-extra tabs-extra--minor">
			<a class="menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('filters') }}</a>
			<div class="menu menu--wide" data-menu="menu" aria-hidden="true"
				data-href="{{ link('forums/filters', $forum, $filters) }}"
				data-load-target=".js-filterMenuBody">
				<div class="menu-content">
					<h4 class="menu-header">{{ phrase('show_only:') }}</h4>
					<div class="js-filterMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
				</div>
			</div>
		</div>
	</h2>

	<xf:if contentcheck="true">
		<div class="block-filterBar">
			<div class="filterBar">
				<ul class="filterBar-filters">
				<xf:contentcheck>
					<xf:extension name="filters">
						<xf:macro name="filters"
							arg-forum="{$forum}"
							arg-filters="{$filters}"
							arg-starterFilter="{$starterFilter}"
							arg-suggestionTabs="{$suggestionTabs}" />
					</xf:extension>
				</xf:contentcheck>
				</ul>
			</div>
		</div>
	</xf:if>
</xf:extension>

<xf:macro name="filters" extends="forum_view::filters" arg-suggestionTabs="!">
	<xf:extension name="prefix_id">
		<xf:extensionparent />

		<xf:if is="
			$filters.suggestion_state
			AND ($filters.suggestion_state != 'implemented' OR !$suggestionTabs.implemented.selected)
		">
			<li><a href="{{ link('forums', $forum, $filters|replace('suggestion_state', null)) }}"
				class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
				<span class="filterBar-filterToggle-label">{{ phrase('suggestion_status') }}:</span>
				<xf:if is="$filters.suggestion_state == 'open'">{{ phrase('open') }}
				<xf:elseif is="$filters.suggestion_state == 'closed'" />{{ phrase('closed') }}
				<xf:elseif is="$filters.suggestion_state == 'implemented'" />{{ phrase('implemented') }}</xf:if></a></li>
		</xf:if>
	</xf:extension>

	<xf:extension name="order">
		<xf:if is="
			$suggestionTabs.latest.selected
			OR $suggestionTabs.popular.selected
			OR $suggestionTabs.newest.selected
		"><xf:else />
			<xf:extensionparent />
		</xf:if>
	</xf:extension>
</xf:macro>