<!DOCTYPE html>

<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></xf:set>
<xf:set var="$description"><xf:description /></xf:set>

<xf:set var="$uix_htmlClasses"></xf:set>

<xf:if is="property('uix_pageWidthToggle') != 'disabled'">
	<xf:comment> UI.X width toggle class</xf:comment>
	<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_page--{{$uix_pageWidth}}</xf:set>
</xf:if>

<xf:if is="property('uix_navigationType') == 'sidebarNav'">
	<xf:comment> UI.X sidebar navigation toggle class</xf:comment>
	<xf:if is="!$uix_sidebarNavCollapsed">
		<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} sidebarNav--active</xf:set>
	</xf:if>
</xf:if>

	<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
	<xf:if is="property('publicIconUrl')">
		<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
	<xf:elseif is="property('publicMetadataLogoUrl')" />
		<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl')) }}" />
</xf:if>

<xf:if is="property('uix_collapsibleSidebar')">
	<xf:comment> UI.X sidebar toggle class</xf:comment>
	<xf:if is="$uix_sidebarCollapsed">
		<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_sidebarCollapsed</xf:set>
	</xf:if>
</xf:if>

<xf:if is="{$uix_showWelcomeSection}">
	<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasWelcomeSection</xf:set>
</xf:if>

<xf:comment>SectionLinks Breakpoints</xf:comment>
<xf:set var="$uix_subNavContentStatic" value="0" />

<xf:comment>--------- COMPONENT MARKUP MACROS ---------
	Markup for components can/should be added here in an XF:set if
	we want the components to have variably set locations
</xf:comment>

<xf:comment> --- Sidebar trigger --- </xf:comment>

<xf:set var="$uix_sidebarTrigger__content">
	<xf:if is="{$sidebar}">
		<xf:if is="property('uix_collapsibleSidebar') && {$uix_canCollapseSidebar}">
			<a aria-label="{{ phrase('th_toggle_sidebar') }}" href="javascript:;" class="uix_sidebarTrigger__component uix_sidebarTrigger {{ (property('uix_sidebarTriggerPosition') == 'sectionLinks') ? 'p-navgroup-link' : 'button'}}" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}" rel="nofollow">
				<xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
				<span class="uix_sidebarTrigger--phrase">{{ phrase('th_toggle_sidebar') }}</span>
			</a>
		</xf:if>
		<xf:if is="property('uix_sidebarMobileCanvas')">
			<a aria-label="{{ phrase('th_toggle_sidebar') }}" href="javascript:;" class="uix_sidebarCanvasTrigger uix_sidebarTrigger__component p-navgroup-link" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
				<xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
				<span class="uix_sidebarTrigger--phrase">{{ phrase('th_toggle_sidebar') }}</span>
			</a>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_sidebarTrigger__component" arg-location="" arg-content="">
	<xf:if is="({$location} == property('uix_sidebarTriggerPosition')) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Search bar --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$uix_search__component">
		<xf:if is="$xf.visitor.canSearch()">
			<div class="uix_searchBar">
				<div class="uix_searchBarInner">
					<form action="{{ link('search/search') }}" method="post" class="uix_searchForm" data-xf-init="quick-search">
						<a class="uix_search--close">
							<xf:fa icon="fa-window-close" />
						</a>
						<xf:textbox autocomplete="off" class="js-uix_syncValue uix_searchInput uix_searchDropdown__trigger" data-uixsync="search" name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" />
						<a href="{{ link('search') }}"
						   class="uix_search--settings u-ripple"
						   data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}"
						   aria-label="{{ phrase('search')|for_attr }}"
						   aria-expanded="false"
						   aria-haspopup="true"
						   title="{{ phrase('search')|for_attr }}">
							<xf:fa icon="fa-cog" />
						</a>
						<span class="<xf:if is="property('uix_searchButton')">uix_search--submit</xf:if> uix_searchIcon">
							<xf:fa icon="fa-search" />
						</span>
						<xf:csrf />
					</form>
				</div>

				<xf:if is="property('uix_searchIconBehavior') != 'dropdown'">
					<a class="uix_searchIconTrigger p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple"
					   aria-label="{{ phrase('search') }}"
					   aria-expanded="false"
					   aria-haspopup="true"
					   title="{{ phrase('search') }}">
						<i aria-hidden="true"></i>
					</a>
				</xf:if>

				<xf:if is="property('uix_searchIconBehavior') != 'expand'">
					<a href="{{ link('search') }}"
					   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple js-uix_minimalSearch__target"
					   data-xf-click="menu"
					   aria-label="{{ phrase('search') }}"
					   aria-expanded="false"
					   aria-haspopup="true"
					   title="{{ phrase('search') }}">
						<i aria-hidden="true"></i>
					</a>
				</xf:if>

				<div class="menu menu--structural menu--wide" data-menu="menu" aria-hidden="true">
					<form action="{{ link('search/search') }}" method="post"
						  class="menu-content"
						  data-xf-init="quick-search">
						<h3 class="menu-header">{{ phrase('search') }}</h3>
						<!--[XF:search_menu:above_input]-->
						<div class="menu-row">
							<xf:if is="$searchConstraints">
								<div class="inputGroup inputGroup--joined">
									<xf:textbox name="keywords"
												class="js-uix_syncValue"
												data-uixsync="search"
												placeholder="{{ phrase('search...') }}"
												aria-label="{{ phrase('search') }}"
												data-menu-autofocus="true" />
									<xf:select name="constraints"
											   class="js-quickSearch-constraint"
											   aria-label="{{ phrase('search_within') }}">
										<xf:option value="">{{ phrase('everywhere') }}</xf:option>
										<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
											<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
										</xf:foreach>
									</xf:select>
								</div>
								<xf:else />
								<xf:textbox name="keywords"
											class="js-uix_syncValue"
											data-uixsync="search"
											placeholder="{{ phrase('search...') }}"
											aria-label="{{ phrase('search') }}"
											data-menu-autofocus="true" />
							</xf:if>
						</div>

						<!--[XF:search_menu:above_title_only]-->
						<div class="menu-row">
							<xf:checkbox standalone="true">
								<xf:option name="c[title_only]">
									<xf:label>
										{{ phrase('search_titles_only') }}

										<xf:if is="$xf.options.enableTagging">
											<span tabindex="0" role="button"
												  data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched')|for_attr }}">

												<xf:fa icon="far fa-question-circle" class="u-muted u-smaller" />
											</span>
										</xf:if>
									</xf:label>
								</xf:option>
							</xf:checkbox>
						</div>
						<!--[XF:search_menu:above_member]-->
						<div class="menu-row">
							<div class="inputGroup">
								<span class="inputGroup-text" id="ctrl_search_menu_by_member">{{ phrase('by:') }}</span>
								<input type="text" class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member')|for_attr }}" aria-labelledby="ctrl_search_menu_by_member" />
							</div>
						</div>
						<div class="menu-footer">
							<span class="menu-footer-controls">
								<xf:button type="submit" class="button--primary" icon="search" />
								<xf:button href="{{ link('search') }}">{{ phrase('advanced_search...') }}</xf:button>
							</span>
						</div>

						<xf:csrf />
					</form>
				</div>


				<div class="menu menu--structural menu--wide uix_searchDropdown__menu" aria-hidden="true">
					<form action="{{ link('search/search') }}" method="post"
						  class="menu-content"
						  data-xf-init="quick-search">
						<!--[XF:search_menu:above_input]-->
						<xf:if is="$searchConstraints">
							<div class="menu-row">

								<div class="inputGroup">
									<input name="keywords"
										   class="js-uix_syncValue"
										   data-uixsync="search"
										   placeholder="{{ phrase('search...') }}"
										   aria-label="{{ phrase('search') }}"
										   type="hidden" />
									<xf:select name="constraints"
											   class="js-quickSearch-constraint"
											   aria-label="{{ phrase('search_within') }}">
										<xf:option value="">{{ phrase('everywhere') }}</xf:option>
										<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
											<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
										</xf:foreach>
									</xf:select>
								</div>
							</div>
							<xf:else />
							<input name="keywords"
								   class="js-uix_syncValue"
								   data-uixsync="search"
								   placeholder="{{ phrase('search...') }}"
								   aria-label="{{ phrase('search') }}"
								   type="hidden" />
						</xf:if>

						<!--[XF:search_menu:above_title_only]-->
						<div class="menu-row">
							<xf:checkbox standalone="true">
								<xf:option name="c[title_only]">
									<xf:label>
										{{ phrase('search_titles_only') }}

										<xf:if is="$xf.options.enableTagging">
											<span tabindex="0" role="button"
												  data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched')|for_attr }}">

												<xf:fa icon="far fa-question-circle" class="u-muted u-smaller" />
											</span>
										</xf:if>
									</xf:label>
								</xf:option>
							</xf:checkbox>
						</div>
						<!--[XF:search_menu:above_member]-->
						<div class="menu-row">
							<div class="inputGroup">
								<span class="inputGroup-text">{{ phrase('by:') }}</span>
								<input class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member') }}" />
							</div>
						</div>
						<div class="menu-footer">
							<span class="menu-footer-controls">
								<xf:button type="submit" class="button--primary" icon="search" />
								<xf:button href="{{ link('search') }}" rel="nofollow">{{ phrase('th_advanced_uix...') }}</xf:button>
							</span>
						</div>

						<xf:csrf />
					</form>
				</div>
			</div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:macro name="uix_search__component" arg-content="!" arg-location="!">
	<xf:if is="(property('uix_searchPosition') == {$location}) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- whats new --- </xf:comment>

<xf:if is="!property('uix_removeWhatsNewButtons')">
<xf:set var="$uix_whatsNew__component">
	<a href="{{ link('whats-new') }}"
	   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
	   title="{{ phrase('whats_new')|for_attr }}">
		<i aria-hidden="true"></i>
		<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
	</a>
</xf:set>
</xf:if>

<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
	<xf:if is="({$xf.visitor.user_id} && property('uix_userTabsPosition') == {$location}) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- login tabs --- </xf:comment>

<xf:set var="$uix_loginTabs__component">
	<xf:if is="{$template} != 'login'">
		<xf:if is="property('uix_loginStyle') == 'dropdown'">
			<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="menu">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('login') }}"></div>
		<xf:elseif is="property('uix_loginStyle') == 'modal'" />
			<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="overlay" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		<xf:elseif is="property('uix_loginStyle') == 'link'" />
			<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		<xf:elseif is="property('uix_loginStyle') == 'slidingPanel'" />
			<a href="{{ link('login') }}" id="uix_loginPanel--trigger" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" rel="nofollow" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		</xf:if>
	</xf:if>
	<xf:if is="{$template} != 'register_form'">
		<xf:if is="property('uix_loginStyle') != 'link'">
			<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-xf-click="overlay" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
			</a>
		<xf:else />
			<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
			</a>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_loginTabs__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_loginTriggerPosition') == {$location} || ({$location} == 'navigation')">
		<xf:if is="{$location} == 'tablinks'">
		</xf:if>
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- user tabs --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$uix_userTabs__component">
		<xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'">
			<a href="{{ link('account') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--user">
				<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
				<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
			</a>

			<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="p-navgroup-link">
				<span class="p-navgroup-linkText">{{ phrase('log_out') }}</span>
			</a>
			<xf:else />
			<a href="{{ link('account') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--user"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.visitor_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{$xf.visitor.username}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
				<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
			</a>
			<div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('account/visitor-menu') }}"
				 data-load-target=".js-visitorMenuBody">
				<div class="menu-content js-visitorMenuBody">
					<div class="menu-row">
						{{ phrase('loading...') }}
					</div>
				</div>
			</div>

			<a href="{{ link('conversations') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
			   data-badge="{$xf.visitor.conversations_unread|number}"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{{ phrase('conversations')|for_attr }}"
			   aria-label="{{ phrase('inbox')|for_attr }}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<i aria-hidden="true"></i>
				<span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('conversations/popup') }}"
				 data-nocache="true"
				 data-load-target=".js-convMenuBody">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('conversations') }}</h3>
					<div class="js-convMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
					<div class="menu-footer menu-footer--split">
						<div class="menu-footer-main">
							<ul class="listInline listInline--bullet">
								<li><a href="{{ link('conversations') }}">{{ phrase('show_all') }}</a></li>
								<xf:if is="$xf.visitor.canStartConversation()">
									<li><a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a></li>
								</xf:if>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<a href="{{ link('account/alerts') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--alerts js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unviewed ? ' badgeContainer--highlighted' : '' }}"
			   data-badge="{$xf.visitor.alerts_unviewed|number}"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.alerts_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{{ phrase('alerts')|for_attr }}"
			   aria-label="{{ phrase('alerts')|for_attr }}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<i aria-hidden="true"></i>
				<span class="p-navgroup-linkText">{{ phrase('nav_alerts') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('account/alerts-popup') }}"
				 data-nocache="true"
				 data-load-target=".js-alertsMenuBody">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('alerts') }}</h3>
					<div class="js-alertsMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
					<div class="menu-footer menu-footer--split">
						<div class="menu-footer-main">
							<ul class="listInline listInline--bullet">
								<li><a href="{{ link('account/alerts') }}">{{ phrase('show_all') }}</a></li>
								<li><a href="{{ link('account/alerts/mark-read') }}" class="js-alertsMarkRead">{{ phrase('mark_read') }}</a></li>
								<li><a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:macro name="uix_userTabs__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_userTabsPosition') == {$location} || ({$location} == 'navigation')">
		<xf:if is="{$location} == 'tablinks'">
		</xf:if>
		{$content}
	</xf:if>
</xf:macro>

<xf:set var="$uix_socialMediaContent">
	<xf:include template="uix_socialMedia" />
</xf:set>

<xf:macro name="uix_socialMedia__component" arg-content="" arg-location="">
	<xf:if is="(property('uix_socialMediaPosition') == {$location}) || ({$location} == 'copyright')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Visitor tabs --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="" arg-searchContent="!" arg-location="!" arg-whatsNewContent="!" arg-visitorContent="!" arg-loginTabsContent="!">
		<xf:if contentcheck="true">
			<xf:contentcheck>
				<xf:if contentcheck="true">
					<div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}">
						<xf:contentcheck>
							<xf:if is="$xf.visitor.user_id">
								<xf:macro name="uix_userTabs__component" arg-content="{$visitorContent}" arg-location="{$location}" />
								<xf:else />
								<xf:macro name="uix_loginTabs__component" arg-content="{$loginTabsContent}" arg-location="{$location}" />
							</xf:if>
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:if contentcheck="true">
					<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
						<xf:contentcheck>
							<xf:macro name="uix_whatsNew__component" arg-content="{$whatsNewContent}" arg-location="{$location}" />
							<xf:macro name="uix_search__component" arg-content="{$searchContent}" arg-location="{$location}" />
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:macro name="uix_socialMedia__component" arg-content="{$socialMediaContent}" arg-location="{$location}" />
			</xf:contentcheck>
		</xf:if>
	</xf:macro>
</xf:if>

<xf:comment> --- Titlebar --- </xf:comment>

<xf:set var="$uix_titlebar__component">
	<xf:if is="!{$uix_hidePageTitle} || ( {$pageAction} && !property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || {{ !in_array({$template}, ['forum_list', 'forum_new_posts', 'thtopics_forum_newest_posts', 'thtrending_trending_view', 'thtopics_forum_latest_threads', 'thtopics_topic_list']) }} )
			   )">
		<xf:if is="$headerHtml is not empty">
			<div class="p-body-header">
				<div class="pageContent">
					{$headerHtml|raw}
				</div>
			</div>
			<xf:elseif contentcheck="true" />
			<div class="p-body-header">
				<div class="pageContent">
					<xf:contentcheck>
						<xf:if contentcheck="true">
							<div class="uix_headerInner">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}">
											<xf:contentcheck>
												<xf:if is="!$noH1">
													<h1 class="p-title-value">{$h1}</h1>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if is="$description is not empty">
										<div class="p-description">{$description}</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
						<xf:if contentcheck="true">
							<div class="uix_headerInner--opposite">
								<xf:contentcheck>
									<xf:if is="!property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || ({$template} != 'forum_list') )">
										<xf:if contentcheck="true">
											<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
										</xf:if>
									</xf:if>
									<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="titlebar" />
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:contentcheck>
				</div>
			</div>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_titlebar__component" arg-location="!" arg-content="!">
	<xf:if is="property('uix_titlebarLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Sidebar --- </xf:comment>

<xf:set var="$uix_sidebar__component">
	<xf:if is="$sidebar">
		<div uix_component="MainSidebar" class="p-body-sidebar">
			<div data-ocm-class="offCanvasMenu-backdrop"></div>
			<div class="uix_sidebarInner {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}">
				<div class="uix_sidebar--scroller">
					<xf:ad position="container_sidebar_above" />
					<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="sidebar" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
					<xf:foreach loop="$sidebar" value="$sidebarHtml">
						{$sidebarHtml}
					</xf:foreach>
					<xf:ad position="container_sidebar_below" />
				</div>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:macro name="uix_sidebar__component" arg-location="!" arg-content="!">
	<xf:if is="property('uix_sidebarLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Logo --- </xf:comment>

<xf:set var="$srcset">{{ property('publicLogoUrl2x') ? base_url(property('publicLogoUrl2x')) . ' 2x' : '' }}</xf:set>

<xf:set var="$uix_logo__component">
	<div class="p-header-logo p-header-logo--image">
		<a class="uix_logo" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
			<xf:if is="property('publicLogoUrl') || property('publicLogoUrl2x')">
				<img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
					 width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
				<xf:else />
				<div class="uix_logo--text"><xf:if is="{{ property('uix_logoIcon') }}"><i class="{{ property('uix_logoIcon') }} uix_logoIcon"></i></xf:if>{{ property('uix_logoText') }}</div>
			</xf:if>
		</a>
		<xf:if is="property('uix_logoSmall')">
			<a class="uix_logoSmall" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
				<img src="{{ base_url(property('uix_logoSmall')) }}"
					 alt="{$xf.options.boardTitle}"
					 />
			</a>
		</xf:if>
	</div>
</xf:set>

<xf:macro name="uix_logo__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- staff bar --- </xf:comment>

<xf:set var="$uix_staffbar__component">
	<xf:if contentcheck="true">
		<div class="p-staffBar <xf:if is="{{ property('uix_stickyStaffBar') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-xf-init="{{ property('uix_stickyStaffBar') ? 'sticky-header' : ''}}">
			<div class="pageContent">
				<xf:contentcheck>
					<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="staffBarLeft" />
					<xf:if contentcheck="true">
						<xf:comment> --- add primary side staff bar content here ---</xf:comment>
						<xf:set var="$uix_alwaysStaffBar" value="1" />
						<div class="p-staffBar-inner hScroller" data-xf-init="h-scroller">
							<div class="hScroller-scroll">
								<xf:contentcheck>
									<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
										<a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
											{{ phrase('approval_queue') }}
										</a>
									</xf:if>

									<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
										<a href="{{ link('reports') }}"
										   class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
										   data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
										   title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a class="p-staffBar-link menuTrigger" data-xf-key="alt+m" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator') }}</a>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
												<xf:contentcheck>
													<!--[XF:mod_tools_menu:top]-->
													<xf:if is="$xf.visitor.is_moderator">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
														<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
													</xf:if>
													<!--[XF:mod_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>

									<xf:if is="$xf.visitor.is_admin">
										<a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a href="{{ base_url('admin.php') }}" target="_blank" class="p-staffBar-link menuTrigger uix_adminTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">
											<xf:if is="$xf.visitor.is_admin">
												{{ phrase('admin') }}
												<xf:else />
												{{ phrase('moderator') }}
											</xf:if>
										</a>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
												<xf:contentcheck>
													<!--[XF:mod_tools_menu:top]-->
													<xf:if is="$xf.visitor.is_admin">
														<a href="{{ base_url('admin.php') }}" target="_blank" class="menu-linkRow">{{ phrase('admin') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
														<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
															{{ phrase('approval_queue') }}
														</a>
													</xf:if>

													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
														<a href="{{ link('reports') }}"
														   class="menu-linkRow badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
														   data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
														   title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update') . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
															{{ phrase('reports') }}
														</a>
													</xf:if>
													<!--[XF:mod_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</div>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="p-nav-opposite">
							<xf:if is="property('uix_staffBarBreakpoint') != '100%'">
								<xf:set var="$uix_responsiveStaffBar" value="1" />
								<xf:else />
								<xf:set var="$uix_alwaysStaffBar" value="1" />
							</xf:if>
							<xf:contentcheck>
								<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="staffBar" />
							</xf:contentcheck>
						</div>
					</xf:if>

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

<xf:if is="!{$uix_alwaysStaffBar} && {$uix_responsiveStaffBar}">
	<xf:set var="$uix_htmlClasses">{$uix_htmlClasses} uix_responsiveStaffBar</xf:set>
</xf:if>

<xf:macro name="uix_staffbar__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- section links --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$subNavHtml">
		<xf:if contentcheck="true">
			<div class="p-sectionLinks">
				<div class="pageContent">
					<xf:contentcheck>
						<xf:if is="property('uix_viewportWidthRemoveSubNav') != '100%'">
							<xf:if is="$selectedNavChildren is not empty">
								<xf:set var="$uix_subNavContentStatic" value="1" />
								<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasSectionLinks</xf:set>
								<div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller">
									<div class="hScroller-scroll">
										<ul class="p-sectionLinks-list">
											<xf:foreach loop="$selectedNavChildren" key="$navId" value="$navEntry" i="$i">
												<li>
													<xf:macro name="nav_entry" arg-navId="{$navId}" arg-nav="{$navEntry}" arg-shortcut="alt+{$i}" />
												</li>
											</xf:foreach>
										</ul>
									</div>
								</div>
							</xf:if>
							<xf:if contentcheck="true">
								<div class="p-nav-opposite">
									<xf:contentcheck>
										<xf:if contentcheck="true">
											<xf:set var="$uix_subNavContentStatic" value="1" />
											<xf:contentcheck>
												<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="tablinks" />
											</xf:contentcheck>
										</xf:if>
										<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="sectionLinks" />
									</xf:contentcheck>
								</div>
							</xf:if>
						</xf:if>
					</xf:contentcheck>
				</div>
			</div>
			<xf:elseif is="{$selectedNavEntry}" />
			<div class="p-sectionLinks p-sectionLinks--empty"></div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:comment> --- UIX sidebar navigation --- </xf:comment>

<xf:set var="$uix_sidebarNav__component">
	<div class="uix_sidebarNav">
		<div class="uix_sidebarNav__inner {{ property('uix_stickySidenav') ? 'uix_stickyBodyElement' : '' }}">
			<div class="uix_sidebar--scroller">
				<xf:if contentcheck="true">
					<ul class="uix_sidebarNavList js-offCanvasNavSource">
						<xf:contentcheck>
							<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
								<li class="uix_sidebarNavList__listItem">
									<xf:macro name="nav_entry"
											  arg-sidebarNav="1"
											  arg-navId="{$navSection}"
											  arg-nav="{$navEntry}"
											  arg-selected="{{ $navSection == $pageSection }}"
											  arg-shortcut="{$i}"/>
								</li>
							</xf:foreach>
						</xf:contentcheck>
					</ul>
				</xf:if>
				<xf:if is="$xf.visitor.user_id">
					<ul class="uix_sidebarNavList">
						<li><div class="p-navEl {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="p-navEl-link"><span>{{ phrase('th_profile_uix') }}</span></a></div></div></li>
						<li><div class="p-navEl {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="p-navEl-link"><span>{{ phrase('alerts')}}</span></a></div></div></li>
						<li><div class="p-navEl {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="p-navEl-link"><span>{{ phrase('settings')}}</span></a></div></div></li>
					</ul>
				</xf:if>
				<xf:if contentcheck="true">
					<div class="uix_sidebarNav__inner__widgets">
						<xf:contentcheck>
							{$uix_sidebarNavWidgets|raw}
						</xf:contentcheck>
					</div>
				</xf:if>
			</div>
		</div>
	</div>
</xf:set>

<xf:macro name="uix_sidebarNav__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- UIX main tab component --- </xf:comment>

<xf:set var="$uix_mainTabsOffset">
	[
		{
			"breakpoint": "0",
			"offset": "0"
		}
	<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar}">
	,{
		"breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}",
		"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
	}	
	</xf:if>
	<xf:if is="{$uix_alwaysStaffBar}">
	,{
		"breakpoint": "0",
		"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
	}	
	</xf:if>
	<xf:if is="{{property('publicNavSticky')}} != 'none'">
			,{
				"breakpoint": "0",
				"offset": "{{property('uix_stickyNavHeight')|escape('json')}}"
			}		
	<xf:if is="{{property('publicNavSticky')}} == 'all' && {$uix_subNavContentStatic}" />		
			,{
				"breakpoint": "{{ property('uix_viewportWidthRemoveSubNav')|escape('json') }}",
				"offset": "{{(property('uix_stickySectionLinkHeight'))|escape('json')}}"
			}
	</xf:if>
	]
</xf:set>

<xf:set var="$uix_mainTabComponent">
	<xf:if contentcheck="true">
		<div data-xf-init="{{ property('uix_mainTabsSticky') ? 'sticky-header' : ''}}" class="block uix_mainTabBar {{ (property('uix_mainTabsSticky') && property('uix_removeHeaderWrapper')) ? 'uix_stickyBar' : ''}}" data-top-offset-breakpoints="{$uix_mainTabsOffset|for_attr}">
			<div class="block-tabHeader tabs hScroller" data-xf-init="h-scroller">
				<span class="hScroller-scroll">
					<xf:contentcheck>
						<xf:if is="{$uix_mainTabSets}">
							<xf:set var="$uix_hasMainTabs" value="1" />
							<xf:macro template="uix_mainTabSets" name="{$uix_mainTabSets}" arg-activeTab="{$uix_mainTabActive}" />
						</xf:if>
					</xf:contentcheck>
				</span>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:macro name="uix_mainTabComponent" arg-content="!" arg-location="!">
	<xf:if is="property('uix_tabBarLocation') === {$location} && property('uix_enableMainTabs')">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment> --- Canvases --- </xf:comment>

<xf:macro name="uix_canvasTab" arg-icon="!" arg-location="!" arg-canvas="!" arg-type="!">
	<xf:if is="{$location} == {$canvas}">
		<div class="uix_canvasTab uix_canvasTab__{{$type}}" data-target="uix_canvasPanel__{{$type}}">
			<xf:fa icon="fa-{$icon}" />
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="uix_canvasTabs" arg-location="!">
	<div class="uix_canvas__tabs">
		<xf:macro name="uix_canvasTab" arg-icon="list" arg-type="navigation" arg-location="{{property('uix_canvas_location_navigation')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="grid" arg-type="sidebar" arg-location="{{property('uix_canvas_location_sidebar')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="user" arg-type="account" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="email" arg-type="conversations" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="alert" arg-type="alerts" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="star" arg-type="custom" arg-location="{{property('uix_canvas_location_custom')}}" arg-canvas="{$location}"/>
	</div>
</xf:macro>

<xf:comment>
	<xf:set var="$uix_whatsNew__component">
		<a href="{{ link('whats-new') }}"
		   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
		   aria-label="{{ phrase('whats_new')|for_attr }}"
		   title="{{ phrase('whats_new') }}">
			<i aria-hidden="true"></i>
			<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
		</a>
	</xf:set>

	<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
		<xf:if is="property('uix_userTabsPosition') == {$location}">
			{$content}
		</xf:if>
	</xf:macro>
</xf:comment>

<xf:comment> --- breadcrumb --- </xf:comment>

<xf:if is="!{$uix_hideBreadcrumb}">
	<xf:set var="$uix_breadcrumbCrumbContent">
		<xf:set var="$position" value="{{ 0 }}" />

		<xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" />
		<xf:if is="$rootBreadcrumb AND $rootBreadcrumb.href != $xf.uri AND $rootBreadcrumb.href != $xf.fullUri">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$rootBreadcrumb.href}"
					  arg-value="{$rootBreadcrumb.title}" />
		</xf:if>

		<xf:if is="$selectedNavEntry AND $selectedNavEntry.href AND $selectedNavEntry.href != $xf.uri AND $selectedNavEntry.href != $xf.fullUri AND $selectedNavEntry.href != $rootBreadcrumb.href">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$selectedNavEntry.href}"
					  arg-value="{$selectedNavEntry.title}" />
		</xf:if>
		<xf:foreach loop="$breadcrumbs" value="$breadcrumb" if="$breadcrumb.href != $xf.uri AND $breadcrumb.href != $xf.fullUri">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$breadcrumb.href}"
					  arg-value="{$breadcrumb.value}" />
		</xf:foreach>
	</xf:set>
</xf:if>

<xf:set var="$breadcrumbCount">{{ count($breadcrumbs)|default(0) }}</xf:set>
<xf:set var="$navEntryCount">{{ $selectedNavEntry == null ? 0 : 1 }}</xf:set>

<xf:if is="{$uix_breadcrumbCrumbContent} && ({{ ($navEntryCount|escape + $breadcrumbCount|escape) != 1 }} || !property('uix_hideSingleCrumb'))">
	<xf:set var="$uix_breadcrumbHasCrumbs" value="1" />
</xf:if>

<xf:macro name="breadcrumbs" arg-breadcrumbHasCrumbs="!" arg-crumbContent="!" arg-variant="">
	<xf:if contentcheck="true">
		<div class="breadcrumb block {{ $variant ? 'p-breadcrumb--' . $variant : '' }}">
			<div class="pageContent">
				<xf:contentcheck>
					<xf:if is="{$breadcrumbHasCrumbs}">
						<xf:if contentcheck="true">
							<ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}"
								itemscope itemtype="https://schema.org/BreadcrumbList">
								<xf:contentcheck>
									{{ $crumbContent }}
								</xf:contentcheck>
							</ul>
						</xf:if>
					</xf:if>
				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="crumb" arg-href="!" arg-value="!" arg-position="{{ 0 }}">
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="{$href}" itemprop="item">
			<xf:if is="{$href} == {$xf.homePageUrl} && property('uix_homeCrumbIcon')">
				<xf:fa icon="fa-home" />
				<span style="display: none;" itemprop="name">{$value}</span>
				<xf:else />
				<span itemprop="name">{$value}</span>
			</xf:if>
		</a>
		<xf:if is="$position"><meta itemprop="position" content="{$position}" /></xf:if>
	</li>
</xf:macro>


<xf:comment> --- Top breadcrumb ---</xf:comment>

<xf:set var="$uix_topBreadcrumb__component">
	<xf:ad position="container_breadcrumb_top_above" />
	<xf:macro name="breadcrumbs"
			  arg-crumbContent="{$uix_breadcrumbCrumbContent}"
			  arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}" />
	<xf:ad position="container_breadcrumb_top_below" />
</xf:set>

<xf:macro name="uix_topBreadcrumb__component" arg-location="" arg-content="!">
	<xf:if is="property('uix_topBreadcrumbLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- bottom breadcrumb --- </xf:comment>

<xf:set var="$uix_bottomBreadcrumb__component">
	<xf:if is="!property('uix_removeBottomBreadcrumb')">
		<xf:ad position="container_breadcrumb_bottom_above" />
		<xf:macro name="breadcrumbs"
				  arg-crumbContent="{$uix_breadcrumbCrumbContent}"
				  arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}"
				  arg-variant="bottom" />
		<xf:ad position="container_breadcrumb_bottom_below" />
	</xf:if>
</xf:set>

<xf:macro name="uix_bottomBreadcrumb__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_bottomBreadcrumbLocation') == {$location}">
		{$content}
	</xf:if>
</xf:macro>


<xf:comment>------ NOTICES ---------</xf:comment>

<xf:set var="$uix_notices">
	<xf:if is="!{$uix_hideNotices}">
		<xf:if is="$notices.block">
			<xf:macro template="notice_macros" name="notice_list" arg-type="block" arg-notices="{$notices.block}" />
		</xf:if>

		<xf:if is="$notices.scrolling">
			<xf:macro template="notice_macros" name="notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" />
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_notices" arg-location="!" arg-content="!">
	<xf:if is="{$location} == property('uix_noticeLocation')">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment>------ FOOTER ---------</xf:comment>

<xf:set var="$uix_footer">
	<footer class="p-footer" id="footer">

		<xf:if is="!{$uix_hideExtendedFooter} && property('uix_enableExtendedFooter')">
			<xf:include template="uix_extendedFooter" />
		</xf:if>

		<div class="p-footer-inner">
			<div class="pageContent">
				<div class="p-footer-row">
					<xf:if contentcheck="true">
						<div class="p-footer-row-main">
							<ul class="p-footer-linkList p-footer-choosers">
								<xf:contentcheck>
									<xf:if is="(property('uix_pageWidthToggle') != 'disabled') && $uix_canTogglePageWidth">
										<li><a id="uix_widthToggle--trigger" data-xf-init="tooltip" title="{{ phrase('th_toggle_width_uix') }}" rel="nofollow"><xf:fa icon="fa-compress-alt" /></a></li>
									</xf:if>
									<xf:if is="$xf.visitor.canChangeStyle() && !{{ property('uix_hideStyleChoose') }}">
										<li><a href="{{ link('misc/style') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('style_chooser') }}" rel="nofollow">{$xf.style.title}</a></li>
									</xf:if>
									<xf:if is="$xf.visitor.canChangeLanguage()">
										<li><a href="{{ link('misc/language') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('language_chooser') }}" rel="nofollow"><i class="fa fa-globe" aria-hidden="true"></i> {$xf.language.title}</a></li>
									</xf:if>
								</xf:contentcheck>
							</ul>
						</div>
					</xf:if>
				</div>
				<div class="p-footer-row-opposite">
					<ul class="p-footer-linkList">
						<xf:if is="$xf.visitor.canUseContactForm()">
							<xf:if is="$xf.contactUrl">
								<li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li>
							</xf:if>
						</xf:if>

						<xf:if is="$xf.tosUrl">
							<li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li>
						</xf:if>

						<xf:if is="$xf.privacyPolicyUrl">
							<li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li>
						</xf:if>

						<xf:if is="$xf.helpPageCount">
							<li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li>
						</xf:if>

						<xf:if is="$xf.homePageUrl">
							<li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li>
						</xf:if>

						<li><a href="#top" title="{{ phrase('top') }}" data-xf-click="scroll-to"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></li>

						<li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="p-footer-copyrightRow">
			<div class="pageContent">
				<div class="uix_copyrightBlock">
					<xf:if contentcheck="true">
						<div class="p-footer-copyright">
							<xf:contentcheck>
								<xf:copyright />
								<xf:callback class="ThemeHouse\Core\Branding" method="renderStyleBranding" /><xf:set var="$thBrandingDisplayed" value="1" />
								{{ phrase('extra_copyright') }}
							</xf:contentcheck>
						</div>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="p-footer-debug">
							<xf:contentcheck>
								<xf:macro template="debug_macros" name="debug"
										  arg-controller="{$controller}"
										  arg-action="{$actionMethod}"
										  arg-template="{$template}" />
							</xf:contentcheck>
						</div>
					</xf:if>
				</div>
				<xf:comment>
					<xf:macro name="uix_socialMedia" arg-location="copyright" template="uix_socialMedia" />
				</xf:comment>
				<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="copyright" />
			</div>
		</div>
	</footer>
</xf:set>

<xf:macro name="uix_footer" arg-insideContent="!" arg-location="!" arg-content="!">
	<xf:if is="($insideContent && {$location} == 'insideContent') || ($location == 'bottom' && !$insideContent)">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment>------ END COMPONENT MARKUP MACROS ---------</xf:comment>

<xf:set var="$thUixFontSize" value="{{ 62.5 * (14 + $xf.visitor.Option.thuix_font_size * 2) / 14 }}" />

<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
	  style="font-size: {$thUixFontSize}%;"
	  data-app="public"
	  data-template="{$template}"
	  data-container-key="{$containerKey}"
	  data-content-key="{$contentKey}"
	  data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
	  data-cookie-prefix="{$xf.cookie.prefix}"
	  data-csrf="{{ csrf_token()|escape('js') }}"
	  class="has-no-js {{ $template ? 'template-' . $template : '' }} {$uix_htmlClasses} {$uix_additionalHtmlClasses}"
	  {{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

		<xf:comment> -- moved to top to use in macros
			<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
			<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
			<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
			<xf:set var="$description"><xf:description /></xf:set>
		</xf:comment>

		<title>{$title}</title>
		<link rel="manifest" href="{{ base_url('webmanifest.php') }}">
		<xf:if is="property('metaThemeColor')">
			<meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
			<meta name="msapplication-TileColor" content="{{ property('metaThemeColor') }}">
		</xf:if>
		<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
		<xf:if is="property('publicIconUrl')">
			<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
		</xf:if>

		<xf:foreach loop="$head" value="$headTag">
			{$headTag}
		</xf:foreach>

		<xf:if is="!$head.meta_site_name && $siteName is not empty">
			<xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_type">
			<xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_title">
			<xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
			<xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_share_url">
			<xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
			<xf:macro template="metadata_macros" name="image_url"
					  arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
					  arg-output="{{ true }}" />
		</xf:if>

		<xf:macro template="helper_js_global" name="head" arg-app="public" />

		<xf:if is="property('publicFaviconUrl')">
			<link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl'), true) }}" sizes="32x32" />
		</xf:if>
		<xf:if is="property('publicMetadataLogoUrl')">
			<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl'), true) }}" />
		</xf:if>
		<xf:include template="google_analytics" />

		<xf:set var="$uix_stickyStaffBarHeight" value="0" />

		<xf:if is="property('uix_stickyStaffBar') && ({$uix_responsiveStaffBar} || {$uix_alwaysStaffBar})">
			<xf:set var="$uix_stickyStaffBarHeight" value="{{property('uix_stickyStaffBarHeight')}}" />
		</xf:if>

	</head>

	<body data-template="{$template}">
		<xf:include template="page_style" />
		<div id="jumpToTop"></div>

		<xf:comment> -- Not currently supporting Sidebar navigation when page style is not covered ---
			<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') != 'covered'">
				<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
			</xf:if>
		</xf:comment>

		<div class="uix_pageWrapper--fixed">
			<div class="p-pageWrapper" id="top">

				<xf:if is="!{{property('uix_removeHeaderWrapper')}}">
				<div class="uix_headerContainer">
					<div class="uix_headerContainer--stickyFix"></div>
				</xf:if>
					<xf:macro name="uix_staffbar__component" arg-content="{$uix_staffbar__component}" />

					<xf:set var="$uix_headerContent">
						<xf:if contentcheck="true">
							<div class="p-header-content">
								<xf:contentcheck>
									<xf:if is="property('uix_viewportShowLogoBlock') != '0'">
										<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />
									</xf:if>

									<xf:if contentcheck="true">
										<div class="p-nav-opposite">
											<xf:contentcheck>
												<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="header" />
											</xf:contentcheck>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:set>

					<xf:macro name="uix_logoBlock" arg-content="">
						<xf:if contentcheck="true">
							<header class="p-header p-header--hasExtraContent" id="header">
								<div class="p-header-inner">
									{$content}
									<xf:contentcheck>
										<xf:ad position="container_header" />
									</xf:contentcheck>

								</div>
							</header>
							<xf:else />
							<header class="p-header" id="header">
								<div class="p-header-inner">
									{$content}
								</div>
							</header>
						</xf:if>
					</xf:macro>

					<xf:if is="{{ !property('uix_navAboveHeader') }}">
						<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
					</xf:if>

					<xf:set var="$navHtml">
						<nav class="p-nav">
							<div class="p-nav-inner">
								<xf:if is="!{$uix_hideNavigation}">
									<xf:set var="$uix_badgeCounter" value="{{$xf.visitor.conversations_unread + $xf.visitor.alerts_unread}}" />
									<xf:if is="{{ property('uix_visitorTabsMobile') == 'canvas' }}">
										<xf:set var="$uix_visitorTabCanvas" value="1" />
										<xf:else />
										<xf:set var="$uix_visitorTabCanvas" value="0" />
									</xf:if>
									<xf:button class="button--plain p-nav-menuTrigger {{ $uix_visitorTabsMobile == 'canvas' ? 'js-badge--alerts js-badge--conversations' : '' }} badgeContainer{{ ($uix_visitorTabCanvas && ($xf.visitor.alerts_unread || $xf.visitor.conversations_unread)) ? ' badgeContainer--highlighted' : '' }}" data-badge="{$uix_badgeCounter|number}" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0" aria-label="{{ phrase('menu')|for_attr }}">
										<i aria-hidden="true"></i>
									</xf:button>
									<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
										<xf:button class="button--plain p-nav-menuTrigger uix_sidebarNav--trigger" id="uix_sidebarNav--trigger" rel="nofollow" role="button" tabindex="0" aria-label="{{ phrase('menu')|for_attr }}">
											<i aria-hidden="true"></i>
										</xf:button>
									</xf:if>
								</xf:if>

								<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />

								<xf:if is="!{$uix_hideNavigation}">
									<xf:if is="property('uix_navigationType') != 'sidebarNav' || property('uix_pageStyle') != 'covered'">
										<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
											<div class="hScroller-scroll">
												<ul class="p-nav-list js-offCanvasNavSource">
													<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
														<li>
															<xf:macro name="nav_entry"
																	  arg-navId="{$navSection}"
																	  arg-nav="{$navEntry}"
																	  arg-selected="{{ $navSection == $pageSection }}"
																	  arg-shortcut="{$i}" />
														</li>
													</xf:foreach>
												</ul>
											</div>
										</div>
									</xf:if>

									<xf:if is="property('uix_activeNavTitle')">
										<div class="uix_activeNavTitle">
											<span>
												<xf:if is="{$uix_mobileActiveNav}">
													{{ $uix_mobileActiveNav }}
													<xf:elseif is="{$selectedNavEntry.href}" />
													{$selectedNavEntry.title}
													<xf:else />
												</xf:if>
											</span>
										</div>
									</xf:if>
								</xf:if>

								<xf:macro name="uix_search__component" arg-location="navigationLeft" arg-content="{$uix_search__component}" />

								<xf:if contentcheck="true">
									<div class="p-nav-opposite">
										<xf:contentcheck>
											<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="navigation" />
											<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="navigation" />
										</xf:contentcheck>
									</div>
								</xf:if>
							</div>
							<xf:comment>
							<xf:macro template="uix_megaMenu" name="uix_megaMenu" />
							</xf:comment>
						</nav>
					</xf:set>
					
					<xf:set var="$uix_navOffset">
						[
							{
								"breakpoint": "0",
								"offset": "0"
							}
							<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}">
							,{
								"breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}",
								"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
							}	
							</xf:if>
							<xf:if is="{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}">
							,{
								"breakpoint": "0",
								"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
							}	
							</xf:if>
						]
					</xf:set>

					<xf:if is="property('publicNavSticky') == 'primary'">
						<div class="p-navSticky p-navSticky--primary <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header">
							{$navHtml|raw}
						</div>
						{$subNavHtml|raw}
						<xf:elseif is="property('publicNavSticky') == 'all'" />
						<div class="p-navSticky p-navSticky--all <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header">
							{$navHtml|raw}
							{$subNavHtml|raw}
						</div>
						<xf:else />
						{$navHtml|raw}
						{$subNavHtml|raw}
					</xf:if>

					<xf:if is="{{ property('uix_navAboveHeader') }}">
						<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
					</xf:if>

					<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="header" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
					<xf:macro name="uix_topBreadcrumb__component" arg-location="header" arg-content="{$uix_topBreadcrumb__component}" />
					<xf:macro name="uix_mainTabComponent" arg-location="header" arg-content="{$uix_mainTabComponent}" />
					<xf:macro name="uix_titlebar__component" arg-location="header" arg-content="{$uix_titlebar__component}" />
					{{$uix_headerExtra|raw }}
				<xf:if is="!{{property('uix_removeHeaderWrapper')}}">
				</div>
				</xf:if>

				<xf:comment> --- UI.X off canvas start ---</xf:comment>
				<div class="offCanvasMenu offCanvasMenu--nav js-headerOffCanvasMenu" data-menu="menu" aria-hidden="true" data-ocm-builder="navigation">
					<div class="offCanvasMenu-backdrop" data-menu-close="true"></div>
					<div class="offCanvasMenu-content">
						<xf:include template="uix_canvasTabs" />
						<xf:include template="uix_canvasPanels" />

						<xf:macro name="canvasNavPanel">
							<div class="offCanvasMenu-header">
								{{ phrase('menu') }}
								<a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close')|for_attr }}"></a>
							</div>
							<xf:if is="$xf.visitor.user_id">
								<div class="p-offCanvasAccountLink">
									<a href="{{ link('account') }}" class="offCanvasMenu-link">
										<xf:avatar user="$xf.visitor" size="xxs" href="" />
										{$xf.visitor.username}
									</a>
									<hr class="offCanvasMenu-separator" />
								</div>
							</xf:if>
							<div class="js-offCanvasNavTarget"></div>
							<xf:if is="$xf.visitor.user_id">
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="offCanvasMenu-link">{{ phrase('th_profile_uix') }}</a></div></div>
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="offCanvasMenu-link">{{ phrase('alerts')}}</a></div></div>
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="offCanvasMenu-link">{{ phrase('settings')}}</a></div></div>
							</xf:if>
							<xf:if contentcheck="true">
								<div class="uix_sidebarNav__inner__widgets">
									<xf:contentcheck>
										{$uix_sidebarNavWidgets|raw}
									</xf:contentcheck>
								</div>
							</xf:if>
						</xf:macro>
						<div class="offCanvasMenu-installBanner js-installPromptContainer" style="display: none;" data-xf-init="install-prompt">
							<div class="offCanvasMenu-installBanner-header">{{ phrase('install_app') }}</div>
							<xf:button class="js-installPromptButton">{{ phrase('install') }}</xf:button>
						</div>
					</div>
				</div>

				<xf:macro name="uix_titlebar__component" arg-location="belowHeader" arg-content="{$uix_titlebar__component}" />

				<div class="p-body">

					<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
						<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
					</xf:if>

					<div class="p-body-inner {{ $removePageWrapper ? 'p-body-inner-none' : ''}}">
						<xf:if is="!is_addon_active('ThemeHouse/UIX') && $xf.visitor.is_admin">
							<div class="blockMessage blockMessage--error blockMessage--errorUixAddon">
								<h2 style="margin: 0 0 .5em 0">UI.X Error</h2>
								<p>
									It appears that you do not have the UI.X Add-on installed. Please install this add-on to ensure your style works as expected. You can download the UI.X add-on <a href="https://www.themehouse.com/xenforo/2/addons/uix-addon">here</a>.
								</p>
								<xf:button href="https://www.themehouse.com/help/documentation/uix2" class="button--primary">
									<xf:fa icon="fa-exclamation-triangle" /> View Documentation
								</xf:button>
							</div>
						</xf:if>
						<!--XF:EXTRA_OUTPUT-->

						<xf:macro name="uix_notices" arg-location="aboveMainContainer" arg-content="{$uix_notices}" />

						<xf:macro name="uix_titlebar__component" arg-location="aboveMainContainer" arg-content="{$uix_titlebar__component}" />

						<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="aboveMainContainer" arg-showWelcomeSection="{$uix_showWelcomeSection}" />

						<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContainer" arg-content="{$uix_topBreadcrumb__component}" />

						<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContainer" arg-content="{$uix_mainTabComponent}" />

						<xf:macro template="browser_warning_macros" name="javascript" />
						<xf:macro template="browser_warning_macros" name="browser" />

<xf:if is="count($xf.reactionsActive) > 1 AND $xf.visitor.user_id">
	<script type="text/template" id="xfReactTooltipTemplate">
		<div class="tooltip-content-inner">
			<div class="reactTooltip">
				<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
					<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
			</div>
		</div>
	</script>
</xf:if>
						<div uix_component="MainContainer" class="uix_contentWrapper">

							<xf:macro name="uix_notices" arg-location="mainContainerTop" arg-content="{$uix_notices}" />

							<xf:ad position="container_content_above" />
							<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContainerTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
							<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContainerTop" arg-content="{$uix_topBreadcrumb__component}" />
							<xf:macro name="uix_titlebar__component" arg-location="mainContainerTop" arg-content="{$uix_titlebar__component}" />
							<xf:macro name="uix_mainTabComponent" arg-location="mainContainerTop" arg-content="{$uix_mainTabComponent}" />

							<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">
								<xf:comment>
								<xf:if is="$sideNav">
									<div class="p-body-sideNavCol"></div>
								</xf:if>
								<div class="p-body-contentCol"></div>
								<xf:if is="$sidebar">
									<div class="p-body-sidebarCol"></div>
								</xf:if>
								</xf:comment>
								<xf:if is="$sideNav">
									<div class="p-body-sideNav">
										<div class="p-body-sideNavTrigger">
											<xf:button class="button--link" data-xf-click="off-canvas" data-menu="#js-SideNavOcm">
												{{ $sideNavTitle ?: phrase('navigation') }}
											</xf:button>
										</div>
										<div class="p-body-sideNavInner {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav">
											<div class="uix_sidebar--scroller">
												<div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div>
												<div data-ocm-class="offCanvasMenu-content">
													<div class="p-body-sideNavContent">
														<xf:ad position="container_sidenav_above" />
														<xf:foreach loop="$sideNav" value="$sideNavHtml">
															{$sideNavHtml}
														</xf:foreach>
														<xf:ad position="container_sidenav_below" />
													</div>
												</div>
											</div>
										</div>
									</div>
								</xf:if>

								<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="left" />
								<div uix_component="MainContent" class="p-body-content">
									<!-- ABOVE MAIN CONTENT -->
									<xf:macro name="uix_notices" arg-location="aboveMainContent" arg-content="{$uix_notices}" />
									<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContent" arg-content="{$uix_topBreadcrumb__component}" />
									<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="aboveMainContent" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
									<xf:macro name="uix_titlebar__component" arg-location="aboveMainContent" arg-content="{$uix_titlebar__component}" />
									<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContent" arg-content="{$uix_mainTabComponent}" />
									<div class="p-body-pageContent">
										<xf:macro name="uix_notices" arg-location="mainContentTop" arg-content="{$uix_notices}" />
										<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContentTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
										<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContentTop" arg-content="{$uix_topBreadcrumb__component}" />
										<xf:macro name="uix_titlebar__component" arg-location="mainContentTop" arg-content="{$uix_titlebar__component}" />
										<xf:macro name="uix_mainTabComponent" arg-location="mainContentTop" arg-content="{$uix_mainTabComponent}" />
										{$content|raw}
										<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContentBottom" />
									</div>
									<!-- BELOW MAIN CONTENT -->
									<xf:ad position="container_content_below" />
									<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContent" />
								</div>

								<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="right" />
							</div>
							<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContainerBottom" />
						</div>
						<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContainer" />
						<xf:macro name="uix_footer" arg-location="insideContent" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />
					</div>
				</div>

				<xf:macro name="uix_footer" arg-location="bottom" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />

				<xf:if contentcheck="true">
					<div class="uix_fabBar uix_fabBar--active">
						<xf:contentcheck>
							<xf:if is="property('scrollJumpButtons')">
								<div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}">
									<xf:button href="#top" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-up" /><span class="u-srOnly">{{ phrase('top') }}</span></xf:button>
									<xf:if is="property('scrollJumpButtons') != 'up'">
										<xf:button href="#footer" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-down" /><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button>
									</xf:if>
								</div>
							</xf:if>
							<xf:if is="property('uix_fab') != 'never'">
								<xf:if contentcheck="true">
									<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
								</xf:if>
							</xf:if>
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:if is="(property('uix_fab') != 'never') && !property('uix_fabScroll')">
					<xf:if contentcheck="true">
						<div class="uix_fabBar uix_fabBar--mirror">
							<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
						</div>
					</xf:if>
				</xf:if>
				<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
					<xf:macro name="uix_tabBar" template="uix_tabBar" />
				</xf:if>
			</div>
		</div>

		<div class="u-bottomFixer js-bottomFixTarget">
			<xf:if is="$notices.floating">
				<xf:macro template="notice_macros" name="notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
			</xf:if>
			<xf:if is="$notices.bottom_fixer">
				<xf:macro template="notice_macros" name="notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
			</xf:if>
		</div>

		<xf:include template="uix_config" />

		<xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" />
		
		<xf:if is="count($xf.reactionsActive) > 1">
			<script type="text/template" id="xfReactTooltipTemplate">
			<div class="tooltip-content-inner">
				<div class="reactTooltip">
					<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
						<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
				</div>
				</div>
			</script>
		</xf:if>

		<xf:if is="property('uix_loginStyle') == 'slidingPanel'">
			<div class="uix__loginForm uix__loginForm--login">
				<div class="uix__loginForm--panel">
					<xf:include template="login">
						<xf:set var="$uix_loginPreventAutoFocus" value="1" />
						<xf:set var="$providers" value="{{$uixConAccProviders}}" />
					</xf:include>
				</div>
				<div class="uix__loginForm--mask"></div>
			</div>
		</xf:if>

		{$ldJsonHtml|raw}

	</body>
</html>

<xf:macro name="nav_entry" arg-sidebarNav="" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut="">
	<div class="p-navEl {{ !$sidebarNav ? 'u-ripple' : '' }} {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}>
		<xf:if is="$sidebarNav">
			<div class="p-navEl__inner u-ripple">
				</xf:if>
			<xf:if is="$nav.href">
				<xf:macro name="nav_link"
						  arg-navId="{$navId}"
						  arg-nav="{$nav}"
						  arg-class="p-navEl-link {{ $nav.children ? 'p-navEl-link--splitMenu' : '' }}"
						  arg-shortcut="{{ $nav.children ? false : $shortcut }}" />
				<xf:if is="$nav.children">
					<a data-xf-key="{$shortcut}"
					   data-xf-click="menu"
					   data-menu-pos-ref="< .p-navEl"
					   class="p-navEl-splitTrigger"
					   role="button"
					   tabindex="0"
					   aria-label="{{ phrase('toggle_expanded')|for_attr }}"
					   aria-expanded="false"
					   aria-haspopup="true">
					</a>
				</xf:if>
				<xf:elseif is="$nav.children" />
				<a data-xf-key="{$shortcut}"
				   class="p-navEl-linkHolder"
				   data-menu-pos-ref="< .p-navEl"
				   data-xf-click="menu"
				   role="button"
				   tabindex="0"
				   aria-expanded="false"
				   aria-haspopup="true">
					<xf:macro name="nav_link"
							  arg-navId="{$navId}"
							  arg-nav="{$nav}"
							  arg-class="p-navEl-link p-navEl-link--menuTrigger" />
				</a>
				<xf:else />
				<xf:macro name="nav_link"
						  arg-navId="{$navId}"
						  arg-nav="{$nav}"
						  arg-class="p-navEl-link"
						  arg-shortcut="{$shortcut}" />
			</xf:if>
			<xf:if is="$nav.children">
				<xf:if is="!{$sidebarNav}">
					<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
						<div class="menu-content">
							<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
								<xf:macro name="nav_menu_entry"
										  arg-navId="{$childNavId}"
										  arg-nav="{$child}" />
							</xf:foreach>
						</div>
					</div>
				</xf:if>
			</xf:if>
			<xf:if is="{$sidebarNav} && $nav.children && property('uix_tablinksInSideNav')">
				<a class="uix_sidebarNav--trigger <xf:if is="!property('uix_sideNavCollapsed') && $selected">is-expanded</xf:if>" rel="nofollow"><xf:fa icon="fa-chevron-down" /></a>
			</xf:if>
			<xf:if is="$sidebarNav">
				</div>
		</xf:if>
		<xf:if is="property('uix_tablinksInSideNav')">
			<xf:if is="{$sidebarNav}">
				<div <xf:if is="$nav.children">data-menu="false"</xf:if> class="uix_sidebarNav__subNav <xf:if is="!property('uix_sideNavCollapsed') && $selected">subNav--expand</xf:if>">
			<div class="uix_sidebarNav__subNavInner">
				<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
					<xf:macro name="nav_menu_entry"
							  arg-navId="{$childNavId}"
							  arg-nav="{$child}" />
				</xf:foreach>
			</div>
			</div>
		</xf:if>
	</xf:if>
</div>
</xf:macro>

<xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}">
	<xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" />
	<{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }}
			class="{$class} {$nav.attributes.class}"
			{{ attributes($nav.attributes, ['class']) }}
			{{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }}
			data-nav-id="{$navId}"><xf:if is="$nav.icon"><xf:fa icon="{$nav.icon}" /> </xf:if><span>{{ $titleHtml ? $titleHtml|raw : $nav.title }}</span><xf:if is="$nav.counter"> <span class="badge badge--highlighted">{$nav.counter|number}</span></xf:if></{$tag}>
</xf:macro>

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
	<xf:macro name="nav_link"
			  arg-navId="{$navId}"
			  arg-nav="{$nav}"
			  arg-class="menu-linkRow u-ripple u-indentDepth{$depth} js-offCanvasCopy" />
	<xf:if is="$nav.children">
		<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
			<xf:macro name="nav_menu_entry"
					  arg-navId="{$childNavId}"
					  arg-nav="{$child}"
					  arg-depth="{{ $depth + 1 }}" />
		</xf:foreach>
		<xf:if is="$depth == 0">
			<hr class="menu-separator" />
		</xf:if>
	</xf:if>
</xf:macro>