<!--
	Unicodes for icons:
		&#127968;	large house
		&#8689;		open with
		&#8962;		small house
		&#8801;		triple line
		&#128281;	Arrow with back under
-->
<div class="topbar-left">
	<a class="topbar-home menuitem" href="#page-index">
		<span class="screen-small" style="background-image:url(img/headers/icons/menu.png);background-repeat:no-repeat;height:50px;background-position:center;"></span>
	</a>
	<a href="#page-messages" class="topbar-notifications menuitem screen-small"></a>
	{{#if key}}
		<span class="menuitem screen-large" onclick="$(this).children('.menu').toggle();">
			<span  style="background-image:url(img/headers/icons/menu.png);background-repeat:no-repeat;height:50px;width:35px;background-position:center;float:left;"></span>			
			<ul class="menu top" style="display:none;margin-top:50px;position:absolute;left:0;">
				<li>
					<a href="#page-index">
						Home
					</a>
				</li>
				<li>
					<a href="#page-projects">
						Projects
					</a>
				</li>
				<li>
					<a href="#page-issues">
						Issues
					</a>
				</li>
				<li>
					<a href="#page-users">
						Users
					</a>
				</li>
			</ul>
		</span>
	{{/if}}
	<a class="topbar-history menuitem" href="#page-index" >
		<div style="background-image:url(img/headers/icons/back.png);background-repeat:no-repeat;background-position:center;width:35px;height:50px;"></div>
	</a>
	<a class="topbar-current menuitem" href="#{{url}}">
		<div style="background-image:url(img/headers/icons/update.png);background-repeat:no-repeat;height:50px;background-position:center;width:35px;float:left;"></div>
	</a>
	<a class="topbar-current menuitem">
		{{title}}
	</a>
</div>
<div class="topbar-right">
	<a class="topbar-back menuitem" href="#{{url}}">
		<div style="background-image:url(img/headers/icons/menu.png);background-repeat:no-repeat;height:50px;background-position:center;"></div>
	</a>
	{{#unless key}}
		<a class="menuitem" href="#page-register">
			Register
		</a>
		<a class="menuitem" href="#page-login">
			Login
		</a>
	{{else}}
		<span class="menuitem screen-large" onclick="$(this).children('.menu').toggle();">
			<span style="background-image:url(img/headers/icons/user.png);height:35px;width:35px;background-position:center;float:left;margin-top:5px;"></span>
			<span style="float:left">
				{{user.name}} <span class="topbar-notifications"></span>
			</span>
			<ul class="menu top" style="display:none;margin-top:50px;position:absolute;right:0;">
				<li>
					<a href="#~{{user.name}}">
						Profile
					</a>
				</li>
				<li>
					<a href="#page-messages">
						<span class="topbar-notifications"></span> Messages
					</a>
				</li>
				<li>
					<a href="#page-logout">
						Logout
					</a>
				</li>
			</ul>
		</span>
		<span class="screen-small">
			<a class="menuitem" href="#page-index">
				Home
			</a>
			<a class="menuitem" href="#~{{user.name}}">
				Profile
			</a>
			<a class="menuitem" href="#page-messages">
				<span class="topbar-notifications"></span> Messages
			</a>
			<a class="menuitem" href="#page-projects">
				Projects
			</a>
			<a class="menuitem" href="#page-issues">
				Issues
			</a>
			<a class="menuitem" href="#page-users">
				Users
			</a>
			<a class="menuitem" href="#page-logout">
				Logout
			</a>
		</span>
	{{/unless}}
</div>