{% extends "base.html" %}
{% block title %}{{ rz_config__rzdoc_cur__name|safe }} -- Rhizi Prototype{% endblock %}
{% block head %}
{{ super() }}
<link href="/static/css/feedback.css" rel="stylesheet" type="text/css">
<script>
var rz_config = { // set as a global variable
    'backend_enabled': true,
    'backend__maintain_ws_connection': true,
    'role_set': {{ rz_config__role_set|safe }},
    'feedback_url': '/feedback',
    'node_edge_separator': true,
    'optimized_main': {{ rz_config__optimized_main }},
    'rand_id_generator' : 'hash',
    'rzdoc_cur__name': "{{ rz_config__rzdoc_cur__name|safe }}",
    'rzdoc__mainpage_name': '{{ rz_config__rzdoc__mainpage_name }}',
    'separator_string': '  ',
};

var RZ_VERSION = '{% include "version.txt" %}';
</script>
<script data-main='/static/js/app.js' src="/static/lib/require.js"></script>
<script src="/static/js/local_config.js"></script>
{% endblock %}
{% block content %}
  <div id="top-bar">
    <div id="top-bar_L1">
      <div id="rzdoc-bar">
        <span id="rzdoc-bar_doc-label"></span>
      </div>
      <div id="top-bar__brand-area">
        <span class="site-logo"><a tabindex="-1"><img id="site-logo" src="{{ fragment_d_path }}/img/site-logo.png"></a></span>
      </div>
      <div id="top-bar__user-area">
        <span class="profile-username">Hello&nbsp;<span id="user_id">{{ rz_username }}!</span>
        <span id="top-bar__logout-btn">Logout</span></span>
      </div>
    </div>
    <div id="top-bar_L2">
      <div id="menu-bar">
        <div class="menu-bar__item" id="menu-bar__rzdoc-new" title="New">New</div>
        <span class="menu-bar__delimiter">・</span>
        <div class="menu-bar__item" id="menu-bar__rzdoc-open" title="Open">Open</div>
        <span class="menu-bar__delimiter">・</span>
        <div class="menu-bar__item" id="menu-bar__activity-view-toggle" title="Enable checkbox to display activity log">
          <span>Show Activity Log</span><input id="checkbox__activity-view-toggle" type="checkbox" name="activity-view-toggle">
        </div>
        <div class="menu-bar__item" id="menu-bar__rzdoc-search" title="Search for Rhizi documents">
          <input id="menu-bar__rzdoc-search__input" placeholder="Search for documents">
        </div>
      </div>
    </div>
  </div>
  <div id="status-bar" style="display:none"></div>
  <div id="intro-task" class="task-alert" style="display:none">
    <span class="task-desc">Connect yourself to the clubs, internship proposals, skills &amp; scientific interests you have.</span>
    <span class="task-close-button">got it</span>
  </div>
  <div class="graph-view">
    <div id="tool-bar">
      <div id="tool-bar-top-bar">
        <div class="tool_bar_btn" id="btn_layout" title="Layout">Layout</div>
        <div class="tool_bar_btn" id="btn_filter" title="Filter">Filter
          <div>
            <div id="menu__type-filter" style="display:none">
              <div id="menu__type-filter_header">Filter by type</div>
            </div>
          </div>
        </div>
        <div class="tool_bar_btn" id="btn_zen_mode" style="display: none" title="Zen mode">Zen mode</div>
        <div class="tool_bar_btn" id="btn_delete" style="display: none" title="Delete nods">Delete</div>
        <div id="tool-bar-multiple-node-operations" style="display: none">
          <div class="tool_bar_btn" id="btn_link_fan" title="Link nodes in fan">Connect</div>
          <div class="tool_bar_btn" id="btn_merge" title="Merge nodes">Merge</div>
        </div>
      </div>
    </div>
    <div id="zoom-bar">
      <div id="btn_zoom_to_selection" title="Zoom to selection"></div>
      <div id="btn_zoom_in" title="Zoom in"></div>
      <div id="btn_zoom_out"title="Zoom out"></div>
    </div>
    <div id="left-column-container">
      <div id="activity_view" style="display:none">
        <div id="activity_view__header">Activity</div>
        <div id="activity_view__body"></div>
      </div>
      <div class="input-container" id="input-container__search">
        <input class="input-bar" tabindex="1" id="search" placeholder="Select elements"/>
        <button tabindex="-1" id="btn_search"></button>
        <div id="selection-count"></div>
        <div id="search-suggestion" class="suggestion" style="display: none"></div>
      </div>
      <div class="input-container" id="input-container__graph-input">
        <div contentEditable="true" tabindex="2" class="input input-bar" id="textanalyser" placeholder="Add elements" autofocus ></div>
        <button tabindex="-1" id="btn_add"></button>
        <div id="input-suggestion" class="suggestion" style="display: none"></div>
        <p class="input-help-text"> Use double-space to form a network. Type:<i><span class="analyser-span-node"> John </span>[double-space]<span class="analyser-span-link">  knows </span>[double-space]<span class="analyser-span-node">  Karate</span></p></i>
      </div>
    </div>
    <div class="info-container" style="display:none">
       <div id="editbox">
         <p class="info-card-message"></p>
         <div class="info-container__row" id="type">
           <div class="info-card-attr">Type</div>
           <select id="edittype" class="select-dropdown">
           </select>
         </div>
         <div class="info-container__row" id="status" style="display:none">
           <div class="info-card-attr">Status</div>
           <select id="editstatus" style="display:none">
             <option value="waiting">Waiting</option>
             <option value="approved">Approved</option>
             <option value="notapproved">Not Approved</option>
           </select>
           <span class="info-card-attr" id="displaystatus"></span>
         </div>
       </div>
    </div>
    <div id="graph-view__canvas"></div>
    <div class="type_selection" style="display:none; width:400px; top: 20px">
      <div class="type_selection__row" id="type_selection__intro">Change node type with <span class="kbd-button">Shift</span>+<span class="kbd-button">Up</span> and <span class="kbd-button">Shift</span>+<span class="kbd-button">Down</span></div>
      <div class="type_selection__row" id="type_selection__chosen_type_label">Chosen Type: <span id="type_selection__chosen_type_name"/></div>
      <div class="type_selection__row" id="type_selection__chosen_type_desc"></div>
    </div>
  </div>
  <div class="rhizi-logo"><a tabindex="-1" href="http://www.rhizi.org">
    <img src="/static/img/rhizi-logo.png"/></a>
  </div>
{% endblock %}
{% block devtools %}
  <div id="debug-view__import">
    <input id="debug-view__import__input_element" type="file" multiple="true" style="display: none;"/>
    <span>Import: </span>
    <span id="devtools__import__select-files-btn" class="devtools__btn">select files</span>
    <span id="devtools__import__step__export" style="display: none;">
      <span class="debug-view__multi-step-cmd-delim">→</span>
      <span id="devtools__import__execute-import-btn" class="devtools__btn">execute import</span>
    </span>
    <div id="debug-view__import__file-list"></div>
  </div>
  <div id="debug-view__export">
    <span id="debug-view__export_btn" class="devtools__btn">Export</span>
  </div>
  <div>
    <span id="debug-view__save" class="devtools__btn">
      <a href="#">Save</a>
    </span>
    <span>・</span>
    <span id="debug-view__local-storage-load" class="devtools__btn">
        <a href="#">Load</a>
    </span>
  </div>
  <div id="debug-view__history">
    <a id="debug-view__save-history" href="#">save history</a>
    <span>・</span>
    <a id="debug-view__replay-history" href="#">replay history</a>
  </div>
  <div class="debug-view__url-copy">
    <a href="#">Copy to URL</a>
  </div>
{% endblock %}