<% if (options.show_top_bar) { %>
    <div class="Rk-TopBar">
        <div class="loader"></div>
        <% if (!options.editor_mode || !options.title_editable) { %>
            <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('Rk-Editor-ColorPicker-User')) } %>
                        </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('Save view')%>"></div>
                <% } %>
                <% if (options.save_view) { %>
                    <div class="Rk-ZoomSetSaved" title="<%-translate('View saved view')%>"></div>
                    <% if (options.hide_nodes) { %>
                	   <div class="Rk-ShowHiddenNodes" title="<%-translate('Show hidden nodes')%>"></div>
                    <% } %>       
                <% } %>
            </div>
        <% } %>
    </div>
</div>