<!DOCTYPE html>
<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
	class="has-no-js {{ $template ? 'template-' . $template : '' }} {{ $xf.visitor.Admin.advanced ? 'acp--advanced-mode' : 'acp--simple-mode' }}" data-template="{$template}"
	data-xf="{$xf.versionVisible}"
	data-app="admin"
	{{ ($xf.style.isVariationsEnabled() && $xf.visitor.Admin.admin_style_variation) ? 'data-variation="' . $xf.visitor.Admin.admin_style_variation . '"' : '' }}
	{{ ($xf.style.isVariationsEnabled() && $xf.visitor.Admin.admin_style_variation) ? 'data-color-scheme="' . property_variation('styleType', $xf.visitor.Admin.admin_style_variation) . '"' : '' }}
	data-cookie-prefix="{$xf.cookie.prefix}"
	data-csrf="{{ csrf_token()|escape('js') }}"
	{{ $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:if is="$xf.style.isVariationsEnabled()">
		<xf:if is="$xf.visitor.Admin.admin_style_variation">
			<meta name="theme-color" content="{{ parse_less_color(property_variation('metaThemeColor', $xf.visitor.Admin.admin_style_variation)) }}" />
		<xf:else />
			<xf:if is="$xf.style.hasAlternateStyleTypeVariation()">
				<meta name="theme-color" media="(prefers-color-scheme: {{ $xf.style.getDefaultStyleType() }})" content="{{ parse_less_color(property_variation('metaThemeColor', 'default')) }}" />
				<meta name="theme-color" media="(prefers-color-scheme: {{ $xf.style.getAlternateStyleType() }})" content="{{ parse_less_color(property_variation('metaThemeColor', $xf.style.getAlternateStyleTypeVariation())) }}" />
			<xf:else />
				<meta name="theme-color" content="{{ parse_less_color(property_variation('metaThemeColor', 'default')) }}" />
			</xf:if>
		</xf:if>
	<xf:else />
		<meta name="theme-color" content="{{ parse_less_color(property_variation('metaThemeColor', 'default')) }}" />
	</xf:if>

	<title>
		<xf:title formatter="%s | {$xf.options.boardTitle} - {{ phrase('admin_control_panel') }}" fallback="{$xf.options.boardTitle} - {{ phrase('admin_control_panel') }}" />
	</title>

	<xf:if is="!$head.meta_referrer">
		<meta name="referrer" content="same-origin" />
	</xf:if>

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

	<xf:macro id="admin:helper_js_global::head" arg-app="admin" />
</head>
<body>

<!-- HEADER -->

<header class="p-header">
	<div class="p-header-buttons p-header-buttons--main">
		<a class="p-header-button p-header-button--nav"
			data-xf-click="off-canvas"
			data-menu="#js-nav"
			role="button"
			tabindex="0"
			aria-label="{{ phrase('menu')|for_attr }}">
			<xf:fa icon="fa-bars" />
		</a>
		<a href="{{ link('index') }}" class="p-header-button" aria-label="{{ phrase('home')|for_attr }}"><xf:fa icon="fa-home" /></a>
		<a href="{{ link_type('public', 'index') }}" class="p-header-button p-header-button--title" target="_blank">{$xf.options.boardTitle}</a>
	</div>

	<div class="p-header-buttons p-header-buttons--opposite">
		<xf:if is="$xf.visitor.hasAdminPermission('option')">
			<a class="p-header-button" data-xf-key="{{ phrase('shortcut.options')|for_attr }}" data-xf-click="menu" role="button" tabindex="0"
				aria-label="{{ phrase('options')|for_attr }}"
				aria-expanded="false"
				aria-haspopup="true">
				<xf:fa icon="fa-cogs" />
			</a>
			<div class="menu menu--structural menu--superWide" data-menu="menu" aria-hidden="true"
				data-href="{{ link('options/menu') }}"
				data-load-target=".js-optionGroupsMenuBody">
				<div class="menu-content js-optionGroupsMenuBody">
					<div class="menu-row">
						{{ phrase('loading...') }}
					</div>
				</div>
			</div>
		</xf:if>
		<xf:if is="$xf.development">
			<xf:macro id="developer_menu" />
		</xf:if>
		<a class="p-header-button" data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}" data-xf-click="menu" role="button" tabindex="0"
			aria-label="{{ phrase('search')|for_attr }}"
			aria-expanded="false"
			aria-haspopup="true">
			<xf:fa icon="fa-search" />
		</a>
		<form action="{{ link('search/search') }}" class="menu menu--structural menu--veryWide" data-xf-init="admin-search" data-menu="menu" aria-hidden="true">
			<div class="menu-content">
				<h3 class="menu-header">{{ phrase('search...') }}</h3>
				<div class="menu-row">
					<input type="text" name="q" autocomplete="off" class="input js-adminSearchInput" data-menu-autofocus="" />
				</div>
				<div class="menu-scroller p-quickSearchResultsWrapper js-adminSearchResultsWrapper">
					<div class="p-quickSearchResults js-adminSearchResults"></div>
				</div>
			</div>
		</form>
	</div>
</header>

<!-- BODY -->

<div class="p-body-container">
	<div class="p-body">
		<nav class="p-nav" id="js-nav" data-ocm-class="offCanvasMenu offCanvasMenu--adminNav" data-ocm-builder="acpNav">
			<div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div>
			<div class="p-nav-inner" data-xf-init="admin-nav" data-ocm-class="offCanvasMenu-content">
				<div class="offCanvasMenu-shown offCanvasMenu-header">
					{{ phrase('menu') }}
					<a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close')|for_attr }}"></a>
				</div>
				<div class="p-nav-content">
					<xf:macro id="navigation_list"
						arg-children="{$navigation}"
						arg-selectedTab="{$selectedNavTab}"
						arg-selectedLink="{$selectedNavLink}" />
				</div>
				<div class="p-nav-tester js-navTester"></div>
			</div>
		</nav>

		<div class="p-main">
			<main class="p-main-inner">

				<!--XF:EXTRA_OUTPUT-->

				<xf:macro id="public:browser_warning_macros::javascript" />
				<xf:macro id="public:browser_warning_macros::browser" />

				<xf:if is="$upgradeCheck">
					<xf:macro id="upgrade_check_macros::serious_errors" arg-upgradeCheck="{$upgradeCheck}" />
				</xf:if>

				<xf:if is="$upgradePending">
					<div class="blockMessage blockMessage--important blockMessage--iconic">
						<xf:include template="public:notice_upgrade_pending" />
					</div>
				</xf:if>

				<xf:if is="$listenersDisabled">
					<div class="blockMessage blockMessage--important blockMessage--iconic">
						{{ phrase('code_listeners_extensions_disabled_warning') }}
					</div>
				</xf:if>

				<xf:if is="$mailDisabled">
					<div class="blockMessage blockMessage--important blockMessage--iconic">
						{{ phrase('mail_has_been_disabled_warning') }}
					</div>
				</xf:if>

				<xf:if is="$breadcrumbs is not empty">
					<ul class="p-breadcrumbs">
						<xf:foreach loop="$breadcrumbs" value="$breadcrumb">
							<li><a href="{$breadcrumb.href}">{$breadcrumb.value}</a></li>
						</xf:foreach>
					</ul>
				</xf:if>

				<xf:if contentcheck="true">
					<div class="p-main-header">
					<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">
										<xf:h1 fallback="{$xf.options.boardTitle}" />
									</h1>
								</xf:if>
								<xf:if contentcheck="true">
									<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
								</xf:if>
							</xf:contentcheck>
							</div>
						</xf:if>

						<xf:if contentcheck="true">
							<div class="p-description"><xf:contentcheck><xf:description /></xf:contentcheck></div>
						</xf:if>
					</xf:contentcheck>
					</div>
				</xf:if>

				<div class="p-content" id="content">
					{$content|raw}
				</div>
			</main>
		</div>
	</div>
</div>

<footer class="p-footer">
	<div class="p-footer-row">
		<div class="p-footer-row-main">
			<a href="{{ link('login/logout', null, {'t': csrf_token()}) }}">{{ phrase('log_out') }}</a>
		</div>

		<div class="p-footer-row-opposite">
			<span class="p-footer-copyright">
				<xf:copyright /> {{ phrase('extra_copyright') }}
			</span>
			<span class="p-footer-version">v{$xf.version}</span>

			<a href="{{ link('account/style-variation') }}" rel="nofollow"
				class="js-styleVariationsLink"
				data-xf-init="tooltip" title="{{ phrase('style_variation') }}"
				data-xf-click="menu" role="button" aria-expanded="false" aria-haspopup="true">

				<xf:fa icon="{{ $xf.style.getVariationIcon($xf.visitor.Admin.admin_style_variation) }}" title="{{ phrase('style_variation') }}" />
			</a>
			<div class="menu" data-menu="menu" aria-hidden="true">
				<div class="menu-content js-styleVariationsMenu">
					<xf:macro name="public:style_variation_macros::variation_menu"
						arg-style="{$xf.style}"
						arg-routeType="admin"
						arg-route="account/style-variation"
						arg-selectedVariation="{$xf.visitor.Admin.admin_style_variation}"
						arg-live="{{ true }}" />
				</div>
			</div>

			<xf:if is="$xf.visitor.canChangeLanguage()">
				<a href="{{ link('account/language') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('language_chooser')|for_attr }}">
					<xf:fa icon="fa-globe" /> {$xf.language.title}
				</a>
			</xf:if>
		</div>
	</div>

	<xf:if contentcheck="true">
		<div class="p-footer-debug">
		<xf:contentcheck>
			<xf:macro id="public:debug_macros::debug"
				arg-controller="{$controller}"
				arg-action="{$actionMethod}"
				arg-template="{$template}" />
		</xf:contentcheck>
		</div>
	</xf:if>
</footer>

<div class="u-bottomFixer js-bottomFixTarget"></div>

<xf:macro id="admin:helper_js_global::body" arg-jsState="{$jsState}" />

</body>
</html>

<xf:macro id="navigation_list"
	arg-children="!"
	arg-selectedTab="!"
	arg-selectedLink="!"
	arg-navigation=""
	arg-depth="1">

	<xf:if is="$children is not empty">
		<xf:if is="$depth == 1">
			<ul class="p-nav-listRoot" id="js-navAccordion">
		<xf:elseif is="$depth == 2" />
			<ul class="p-nav-listSection {{ $navigation.navigation_id == $selectedTab ? 'is-active' : '' }}">
		<xf:else />
			<ul class="p-nav-subList p-nav-list--depth{$depth}">
		</xf:if>
		<xf:foreach loop="$children" value="$child">
			<xf:macro id="navigation_list_entry"
				arg-navigation="{$child.record}"
				arg-children="{$child.children}"
				arg-selectedTab="{$selectedTab}"
				arg-selectedLink="{$selectedLink}"
				arg-depth="{$depth}" />
		</xf:foreach>
		</ul>
	</xf:if>
</xf:macro>
<xf:macro id="navigation_list_entry" arg-navigation="!" arg-children="!" arg-selectedTab="!" arg-selectedLink="!" arg-depth="1">
	<xf:if is="$depth == 1">
		<li class="p-nav-section{{ $navigation.navigation_id == $selectedTab ? ' is-active' : '' }}" data-navigation-id="{$navigation.navigation_id}">
			<div class="p-nav-sectionHeader">
				<a href="{{ link({$navigation.link}) }}" class="p-nav-sectionLink js-navSectionToggle">
					<xf:fa icon="{{ $navigation.icon|substr(0, 3) === 'fa-' ? 'fad ' : '' }}{$navigation.icon} fa-fw" /> <span>{$navigation.title}</span>
				</a>
				<a class="p-nav-sectionToggle js-navSectionToggle" role="button" tabindex="0" aria-label="{{ phrase('toggle_expanded')|for_attr }}"></a>
			</div>
	<xf:elseif is="$depth == 2" />
		<li class="{{ $children ? 'p-nav-subSection' : 'p-nav-el' }} {{ $navigation.navigation_id == $selectedLink ? ' is-active' : '' }}" data-navigation-id="{$navigation.navigation_id}">
			<xf:if is="$children OR !$navigation.link">
				<span>
					<xf:if is="{$navigation.icon}"><xf:fa icon="{$navigation.icon} fa-fw" /> </xf:if>{$navigation.title}</span>
			<xf:else />
				<a href="{{ link($navigation.link) }}">{$navigation.title}</a>
			</xf:if>
	<xf:else />
		<li class="p-nav-el {{ $navigation.navigation_id == $selectedLink ? ' is-active' : '' }}" data-navigation-id="{$navigation.navigation_id}">
			<xf:if is="{$navigation.link}">
				<a href="{{ link($navigation.link) }}">{$navigation.title}</a>
			<xf:else />
				<span>{$navigation.title}</span>
			</xf:if>
	</xf:if>
		<xf:macro id="navigation_list"
			arg-navigation="{$navigation}"
			arg-children="{$children}"
			arg-selectedTab="{$selectedTab}"
			arg-selectedLink="{$selectedLink}"
			arg-depth="{{ $depth + 1 }}" />
	</li>
</xf:macro>

<xf:macro id="developer_menu">
	<a class="p-header-button" data-xf-key="{{ phrase('shortcut.development_menu')|for_attr }}" data-xf-click="menu" role="button" tabindex="0"
		aria-label="{{ phrase('development')|for_attr }}"
		aria-expanded="false"
		aria-haspopup="true">
		<xf:fa icon="fa-code" />
	</a>
	<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
		<div class="menu-content js-optionGroupsMenuBody">
			<h4 class="menu-header menu-header--small">{{ phrase('public') }}</h4>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('templates/add', null, {'style_id': 0, 'type': 'public'}) }}">
				<xf:fa icon="fab fa-html5" /> {{ phrase('add_template') }}</a>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('template-modifications/add', null, {'type': 'public'}) }}">
				<xf:fa icon="fa-file-search" /> {{ phrase('add_template_modification') }}</a>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('navigation/add') }}">
				<xf:fa icon="fa-link" /> {{ phrase('add_navigation') }}</a>
			<hr class="menu-separator menu-separator--hard">

			<h4 class="menu-header menu-header--small">{{ phrase('admin') }}</h4>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('templates/add', null, {'style_id': 0, 'type': 'admin'}) }}">
				<xf:fa icon="fab fa-html5" /> {{ phrase('add_template') }}</a>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('template-modifications/add', null, {'type': 'admin'}) }}">
				<xf:fa icon="fa-file-search" /> {{ phrase('add_template_modification') }}</a>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('admin-navigation/add') }}">
				<xf:fa icon="fa-link" /> {{ phrase('add_navigation') }}</a>
			<hr class="menu-separator menu-separator--hard">

			<h4 class="menu-header menu-header--small">{{ phrase('admin_navigation.appearance') }}</h4>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('style-properties/add', null, {'style_id': 0}) }}">
				<xf:fa icon="fab fa-css3-alt" /> {{ phrase('add_property') }}</a>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('phrases/add', null, {'language_id': 0}) }}">
				<xf:fa icon="fa-language" /> {{ phrase('add_phrase') }}</a>
			<hr class="menu-separator menu-separator--hard">

			<h4 class="menu-header menu-header--small">{{ phrase('code') }}</h4>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('routes/add') }}">
				<xf:fa icon="fa-route" /> {{ phrase('add_route') }}</a>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('content-types/add') }}">
				<xf:fa icon="fa-puzzle-piece" /> {{ phrase('add_content_type_field') }}</a>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('class-extensions/add') }}">
				<xf:fa icon="fa-code-branch" /> {{ phrase('add_class_extension') }}</a>
			<a class="menu-linkRow" data-xf-click="overlay" href="{{ link('code-events/listeners/add') }}">
				<xf:fa icon="fa-headphones" /> {{ phrase('add_code_event_listener') }}</a>
		</div>
	</div>
</xf:macro>