<!--
	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-large">
			<span class="icon-bugs"></span>
			Home
		</span>
		<span class="screen-small">
			&#8801;
		</span>
	</a>
	<a class="topbar-current menuitem" href="#{{url}}">
		{{title}}
	</a>
</div>
<div class="topbar-right">
	<a class="topbar-back menuitem" href="#{{url}}">
		&#8801;
	</a>
	<a class="topbar-history menuitem" href="#page-index">
		&larr;
	</a>
	<a class="topbar-index menuitem" href="#page-index">
		<span class="icon-bugs"></span>Home
	</a>
	<a class="topbar-current menuitem" href="#{{url}}">
		{{title}}
	</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').css({'left':$(this).position().left}).toggle();">
			<span style="float:left">
				Menu
			</span>
			<span class="ui-icon ui-icon-circle-triangle-s" style="float:right;margin-top:9px;"></span>
			<ul class="menu top" style="display:none;margin-top:35px;position:absolute;right:0;">
				<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>
		<span class="menuitem screen-large" onclick="$(this).children('.menu').toggle();">
			<span style="float:left">
				{{user.name}}
			</span>
			<span class="ui-icon ui-icon-circle-triangle-s" style="float:right;margin-top:9px;"></span>
			<ul class="menu top" style="display:none;margin-top:35px;position:absolute;right:0;">
				<li>
					<a href="#~{{user.name}}">
						Profile
					</a>
				</li>
				<li>
					<a href="#page-logout">
						Logout
					</a>
				</li>
			</ul>
		</span>
		<span class="screen-small">
			<a class="menuitem" href="#~{{user.name}}">
				Profile
			</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>