<% if (options.show_top_bar) { %>
	<div class="Rk-TopBar">
		<div class="loader"></div>
		<% if (!options.editor_mode) { %>
			<h2 class="Rk-PadTitle">
				<%- project.get("title") || translate("Untitled project")%>
			</h2>
		<% } else { %>
			<input type="text" class="Rk-PadTitle" value="<%- project.get('title') || '' %>" placeholder="<%-translate('Untitled project')%>" />
		<% } %>
		<% if (options.show_user_list) { %>
			<div class="Rk-Users">
				<div class="Rk-CurrentUser">
					<% if (options.show_user_color) { %>
						<div class="Rk-Edit-ColorPicker-Wrapper">
							<span class="Rk-CurrentUser-Color">
							<% if (options.user_color_editable) { %>
								<span class="Rk-Edit-ColorTip"></span>
							<% } %>
							</span>
							<% if (options.user_color_editable) { print(colorPicker) } %>
						</div>
					<% } %>
					<span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span>
				</div>
				<ul class="Rk-UserList"></ul>
			</div>
		<% } %>
		<% if (options.home_button_url) {%>
			<div class="Rk-TopBar-Separator"></div>
			<a class="Rk-TopBar-Button Rk-Home-Button" href="<%- options.home_button_url %>">
				<div class="Rk-TopBar-Tooltip">
					<div class="Rk-TopBar-Tooltip-Contents">
						<%- translate(options.home_button_title) %>
					</div>
				</div>
			</a>
		<% } %>
		<% if (options.show_fullscreen_button) { %>
			<div class="Rk-TopBar-Separator"></div>
			<div class="Rk-TopBar-Button Rk-FullScreen-Button">
				<div class="Rk-TopBar-Tooltip">
					<div class="Rk-TopBar-Tooltip-Contents">
						<%-translate("Full Screen")%>
					</div>
				</div>
			</div>
		<% } %>
		<% if (options.editor_mode) { %>
			<% if (options.show_addnode_button) { %>
				<div class="Rk-TopBar-Separator"></div>
				<div class="Rk-TopBar-Button Rk-AddNode-Button">
					<div class="Rk-TopBar-Tooltip">
						<div class="Rk-TopBar-Tooltip-Contents">
							<%-translate("Add Node")%>
						</div>
					</div>
				</div>
			<% } %>
			<% if (options.show_addedge_button) { %>
				<div class="Rk-TopBar-Separator"></div>
				<div class="Rk-TopBar-Button Rk-AddEdge-Button">
					<div class="Rk-TopBar-Tooltip">
						<div class="Rk-TopBar-Tooltip-Contents">
							<%-translate("Add Edge")%>
						</div>
					</div>
				</div>
			<% } %>
			<% if (options.show_export_button) { %>
				<div class="Rk-TopBar-Separator"></div>
				<div class="Rk-TopBar-Button Rk-Export-Button">
					<div class="Rk-TopBar-Tooltip">
						<div class="Rk-TopBar-Tooltip-Contents">
							<%-translate("Download Project")%>
						</div>
					</div>
				</div>
			<% } %>
			<% if (options.show_save_button) { %>
				<div class="Rk-TopBar-Separator"></div>
				<div class="Rk-TopBar-Button Rk-Save-Button">
					<div class="Rk-TopBar-Tooltip">
						<div class="Rk-TopBar-Tooltip-Contents"></div>
					</div>
				</div>
			<% } %>
			<% if (options.show_open_button) { %>
				<div class="Rk-TopBar-Separator"></div>
				<div class="Rk-TopBar-Button Rk-Open-Button">
					<div class="Rk-TopBar-Tooltip">
						<div class="Rk-TopBar-Tooltip-Contents">
							<%-translate("Open Project")%>
						</div>
					</div>
				</div>
			<% } %>
			<% if (options.show_bookmarklet) { %>
				<div class="Rk-TopBar-Separator"></div>
				<a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#">
					<div class="Rk-TopBar-Tooltip">
						<div class="Rk-TopBar-Tooltip-Contents">
							<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%>
						</div>
					</div>
				</a>
				<div class="Rk-TopBar-Separator"></div>
			<% } %>
		<% } else { %>
			<% if (options.show_export_button) { %>
				<div class="Rk-TopBar-Separator"></div>
				<div class="Rk-TopBar-Button Rk-Export-Button">
					<div class="Rk-TopBar-Tooltip">
						<div class="Rk-TopBar-Tooltip-Contents">
							<%-translate("Download Project")%>
						</div>
					</div>
				</div>
				<div class="Rk-TopBar-Separator"></div>
			<% } %>
		<% }; %>
		<% if (options.show_search_field) { %>
			<form action="#" class="Rk-GraphSearch-Form">
				<input type="search" class="Rk-GraphSearch-Field" placeholder="<%- translate('Search in graph') %>" />
			</form>
			<div class="Rk-TopBar-Separator"></div>
		<% } %>
	</div>
<% } %>
<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>">
	<div class="Rk-Labels"></div>
	<canvas class="Rk-Canvas" <% if (options.resize) { %> resize="" <% } %>></canvas>
	<div class="Rk-Notifications"></div>
	<div class="Rk-Editor">
		<% if (options.show_bins) { %>
			<div class="Rk-Fold-Bins">&laquo;</div>
		<% } %>
		<% if (options.show_zoom) { %>
			<div class="Rk-ZoomButtons">
				<div class="Rk-ZoomIn" title="<%-translate('Zoom In')%>"></div>
				<div class="Rk-ZoomFit" title="<%-translate('Zoom Fit')%>"></div>
				<div class="Rk-ZoomOut" title="<%-translate('Zoom Out')%>"></div>
				<% if (options.editor_mode && options.save_view) { %>
					<div class="Rk-ZoomSave" title="<%-translate('Zoom Save')%>"></div>
				<% } %>
				<% if (options.save_view) { %>
					<div class="Rk-ZoomSetSaved" title="<%-translate('View saved zoom')%>"></div>
				<% } %>
			</div>
		<% } %>
	</div>
</div>