<header>
	${@hook_action('admin_header', 'before')}
	<div class="col-12 mm_col">
		<div id="nav_quick" class="mm_nav_fast">
			<button class="btn_link btn_primary btn_fold hide_phone"><i class="fa-bars"></i></button>
			<button class="btn_link btn_primary btn_side show_phone"><i class="fa-bars"></i></button>
		</div>
		<div class="mm_nav_top" id="nav_top">
			<button class="btn_link" id="btn_nav_top"><i class="fa fa-user"></i></button>
			<div class="nav_warp">
				<nav>
					<div class="item">
						<a id="search_button" href="javascript:void(0)">
							<figure class="mm_icon mr-1"><i class="fa-search"></i></figure><span>搜索</span>
						</a>
					</div>
					<div class="item">
						<!--{ if(msg_num) }-->
						<a target="iframe" href="/user/message?is_read=0" class="msg"
							data-msg="${msg_num || 0}"><span>消息</span></a>
						<!--{ else }-->
						<a target="iframe" href="/user/message"><span>消息</span></a>
						<!--{ /if }-->
					</div>
					<div class="item"><a target="_blank" href="${globalBag.conf.help_doc}" class="tip_hover tip-bottom"
							data-tip="帮助文档">
							<i class="fa-question-circle-o"
								style="font-size: 1.125rem;position: relative;top: 1px;"></i>
						</a></div>
					<div class="item">
						<div class="control_select user hover" id="user_select">
							<div class="value">
								<div class="user_avatar"><img src="${hook_action('user', 'avatar')}" alt="user_avatar" class="avatar">
								</div>
								<div class="mm_box">
									<ul>
										<li><a target="iframe" href="/user/base" class="click">基本资料</a>
										</li>
										<li><a target="iframe" href="/user/password" class="click">修改密码</a></li>
										<li><a id="btn_edit" href="javascript:void(0)" class="click">退出</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="item">
						<a id="enterFullScreen" href="javascript:void(0)" class="tip_hover tip-bottom"
							data-tip="全屏显示"><i class="fa-arrows-alt"></i></a>
						<a id="exitFullScreen" class="hide tip_hover tip-bottom" href="javascript:void(0)"
							data-tip="退出全屏"><i class="fa-arrows-alt"></i></a>
					</div>
					<div class="item"><a target="iframe" href="/sys/config" class="tip_hover tip-left-bottom"
							data-tip="系统设置">
							<i class="fa-ellipsis-v"></i><span class="hide">系统设置</span>
						</a></div>
				</nav>
				<div class="mask"></div>
			</div>
		</div>
	</div>
	${@hook_action('admin_header', 'after')}
</header>

<style>
	.item {
		border-left: 1px solid rgba(0, 0, 0, 0.4);
		position: relative;
		min-width: 2.5rem;
		text-align: center;
		line-height: 2.5rem;
	}

	.mm_nav_top .item:before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		border-left: 1px solid rgba(255, 255, 255, 0.1);
	}

	#nav_top .msg:after {
		content: attr(data-msg);
		text-align: center;
		display: inline-block;
		border-radius: var(--radius_mini);
		min-width: 1rem;
		font-size: 0.75rem;
		height: 1rem;
		line-height: 1.425;
		padding: 0 0.25rem 0 0.2rem;
		background: #ff9000;
		color: var(--font_white);
		margin-left: .25rem;
	}

	.mm_nav_top .mm_box {
		background-color: rgba(0, 0, 0, 0.7);
	}
</style>

<script>
	$(".btn_fold").click(function() {
		$("#side").toggleClass('fold');
	});

	$(".btn_side").click(function() {
		$("#side").removeClass('fold');
		$("#side").toggleClass('hide-x');
		$(".mask_side").toggleClass('hide-x');
	});

	$("#search_button").click(function() {
		$("#web_search").toggleClass('hide-x');

		$("#web_search .mask").click(function() {
			$("#web_search").addClass('hide-x');
		});
	});

	$("#user_select").click(function() {
		$("#user_select .mm_box").toggleClass('show');
	});

	$("#btn_edit").click(function() {
		$.http.get("/api/user/sign_out");
		// window.location.href = "/cloud/${project_id}/login";
		window.location.href = "/";
	});

	$(document).click(function(e) {
		var tag = $("#user_select");
		if (!tag.is(e.target) && tag.has(e.target).length === 0) {
			$("#user_select .mm_box").removeClass('show');
		}
	});

	$("#enterFullScreen").click(function() {
		enterFullScreen();
		$("#exitFullScreen").removeClass('hide');
		$("#enterFullScreen").addClass('hide')
	});

	$("#exitFullScreen").click(function() {
		exitFullScreen();
		$("#enterFullScreen").removeClass('hide');
		$("#exitFullScreen").addClass('hide');
	});

	$("#btn_nav_top").click(function() {
		$(".mm_nav_top").toggleClass('show');
	});

	$(".mm_nav_top .mask").click(function() {
		$(".mm_nav_top").toggleClass('show');
	});
</script>

<style>
	header {
		background: var(--bg_header);
		color: var(--font_header);
	}
</style>