#{param name=menu/} 
#{param name=messages/}
<script type="text/javascript">
	var outlookBundle = ${messages};
</script>
<div id="outlook-pane">
	#{include path=errorBanner.gtmpl/}
	<%	if (menu) { %>
	<%		if (menu.size() > 1) { // Show menu bar only if more that one menu given %>
	<div id="outlook-menu" class="ms-NavBar">
		<div class="ms-NavBar-openMenu js-openMenu">
			<i class="ms-Icon ms-Icon--menu"></i>
		</div>
		<div class="ms-Overlay"></div>
		<ul class="ms-NavBar-items">
			<%	for (m in menu) {
						if (m.hasSubmenu()) { %>
			<li class="ms-NavBar-item ms-NavBar-item--hasMenu">
				<a class="ms-NavBar-link outlookGroupMenu ${m.name}" data-name="${m.name}">${m.title}</a><i class="ms-NavBar-chevronDown ms-Icon ms-Icon--chevronDown"></i>
				<ul class="ms-ContextualMenu">
					<%	for (sm in m.submenu) { %>
					<li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link outlookMenu ${sm.name}" data-name="${sm.name}">${sm.title}</a></li>
					<%	} %>
				</ul></li>
			<%		}	else { %>
			<li class="ms-NavBar-item"><a class="ms-NavBar-link outlookMenu ${m.name}" data-name="${m.name}">${m.title}</a></li>
			<%		} %>
			<%	}%>
		</ul>
	</div>
	<% 		} %>
	<br>
	<div id="outlook-menu-container" data-menu-name="${menu[0].name}"></div>
	<% 	} else { %>
	<div id="outlook-no-menu">&{Outlook.homeNoActionsAvailable}</div>
	<%	} %>
	<div id="outlook-brand-bar" class="ms-bgColor-themePrimary ms-borderColor-themePrimary">
		<ul class="brandBar ms-font-m">
			<li class="brand">
				<a class="ms-Link ms-fontColor-yellow ms-fontColor-yellow--hover brandLink" href="/portal" target="_blank">
					<img src="/outlook/images/exo-icon-24.png"><span class="brandTitle">eXo Platform</span>
				</a>
			</li>
			<li class="showLogout">
				<a class="ms-Link ms-fontColor-yellow ms-fontColor-yellow--hover showLogoutLink" href="javascript:void(0);" target="_self">
					<img src="/outlook/images/16x16/logout-gray-yellow.png" class="showLogoutIcon"><span class="showLogoutTitle">&{Outlook.logout}</span>
				</a>
			</li>
		</ul>
		<div class="ms-Dialog logoutDialog" style="display: none;">
			<div class="ms-Overlay ms-Overlay--dark js-DialogAction--close"></div>
			<div class="ms-Dialog-main">
				<button class="ms-Dialog-button ms-Dialog-button--close js-DialogAction--close">
					<i class="ms-Icon ms-Icon--x"></i>
				</button>
				<div class="ms-Dialog-header">
					<p class="ms-Dialog-title text-centered">&{Outlook.logoutTitle}</p>
				</div>
				<div class="ms-Dialog-inner">
					<form role="form">
						<div class="ms-Dialog-content">
							<p class="ms-Dialog-subText">&{Outlook.logoutQuestion}</p>
						</div>
						<div class="ms-Dialog-actions text-centered">
							<button class="ms-Dialog-action ms-Button ms-Button--primary logout">
								<span class="ms-Button-label" title="&{Outlook.logoutDescription}">&{Outlook.logout}</span>
							</button>
							<button class="ms-Dialog-action ms-Button cancel">
								<span class="ms-Button-label" title="&{Outlook.cancelLogoutDescription}">&{Outlook.cancel}</span>
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="outlook-popup" style="display: none;"></div>
</div>