{% extends "base.html" %}
{% block title %}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
    'rand_id_generator' : 'hash',
    'rz_server_host': '{{ rz_config__hostname }}',
    'rz_server_port': '{{ rz_config__port }}',
    'backend_enabled': true,
    'backend__maintain_ws_connection': true,
    'feedback_url': '/feedback',
    'optimized_main': {{ rz_config__optimized_main }},
    'node_edge_separator': true,
    'separator_string': '  ',
    'role_set': {{ rz_config__role_set|safe }},
};
</script>
<script data-main='/static/app.js' src="/static/lib/require.js"></script>
<script src="/static/local_config.js"></script>
{% endblock %}
{% block content %}
  <div class="top-bar">
    <span id="top-bar_float-left">
      <div id="toolbar__doc">
        <span id="toolbar__doc_doc-title">Welcome Rhizi</span>
        <div class="tool_bar_btn" id="btn_rzdoc__new" title="New"></div>
        <div class="tool_bar_btn" id="btn_rzdoc__open" title="Open"></div>
      </div>
    </span>
    <span id="top-bar_float-right">
      <span class="top-bar__user-area">
           <span id="profile-circle"></span>
           <span class="profile-username">Welcome&nbsp;<span id="user_id">{{ rz_username }}</span>!<span id="btn-logout" class="button">Logout</span></span>
      </span>
      <span class="logo-3rd-party"><a tabindex="-1" href="http://cri-paris.org/"><img id="logo-3rd-party__CRI" src="/static/img/CRI-logo.png"></a></span>
    </span>
  </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_export" title="Export"></div>
        <div class="tool_bar_btn" id="btn_filter" title="Filter">
          <div>
            <div id="menu__type-filter" style="display:none">
              <div class="dropdown-menu-heading" id="menu__type-filter__title">Filter by node type</div>
              <ul class="dropdown-menu">
                <li class="dropdown-item dropdown-item-type dropdown-item-type-internship">
                  <label><input type="checkbox" checked="checked" name="internship">Internship</label>
                </li>
                <li class="dropdown-item dropdown-item-type dropdown-item-type-interest">
                  <label><input type="checkbox" checked="checked" name="interest">Interest</label>
                </li>
                <li class="dropdown-item dropdown-item-type dropdown-item-type-Skill">
                  <label><input type="checkbox" checked="checked" name="skill">Skill</label>
                </li>
                <li class="dropdown-item dropdown-item-type dropdown-item-type-Club">
                  <label><input type="checkbox" checked="checked" name="club">Club</label>
                </li>
                <li class="dropdown-item dropdown-item-type dropdown-item-type-person">
                  <label><input type="checkbox" checked="checked" name="person">Person</label>
                </li>
              </ul>
            </div>
          </div>
        </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"></div>
          <div class="tool_bar_btn" id="btn_merge" title="Merge nodes">Merge</div>
          <div class="tool_bar_btn" id="btn_delete" title="Delete nods">Delete</div>
        </div>
      </div>
    </div>
    <div id="zoom-bar">
      <div id="btn_zoom_in"></div>
      <div id="btn_zoom_out"></div>
    </div>
    <div id="input-box-set-container">
      <div class="input-container" id="input-container__search">
          <input class="input-bar" tabindex="1" id="search" placeholder="Search for nodes or links"/>
          <button tabindex="-1" id="btn_search"></button>
        <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 nodes or links" autofocus ></div>
          <button tabindex="-1" id="btn_add"></button>
        <div id="input-suggestion" class="suggestion" style="display: none"></div>
      </div>
    </div>
    <div class="info-container">
      <div class="edge_info" style="display:none">Title: <span id="edgetitle"></span><br/>
          <button id="deleteedge">Delete</button>
      </div>
      <div class="info" style="display:none">
          <div id="editbox">
            <p class="info-card-message"></p>
            <p class="info-card-attr">Name</p>
            <textarea class="info-card-attr-val" id="editname"></textarea>
            <label class="info-card-attr">Type</label>
            <select id="edittype" class="select-dropdown">
                <option value="person">Person</option>
                <option value="club">Club</option>
                <option value="skill">Skill</option>
                <option value="interest">Interest</option>
                <option value="internship">Internship</option>
            </select><br/>
            <div id="status">
                <label class="info-card-attr">Status</label>
                <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>
                <br/>
            </div>
            <div id="startdate"><label class="info-card-attr">Start date</label><input id="editstartdate"/></br></div>
            <div id="enddate"><label class="info-card-attr">End date:</label><input id="editenddate"/></div>
            <div id="url"><p class="info-card-attr">URL</p><p class="info-card-attr-val info-card-url"><input id="editurl"></p></div>
            <div id="description"><label class="info-card-attr">Description</label>
            <textarea class="info-card-attr-val" id="editdescription"></textarea></div>
            <div id="info-container__bottom-btn-bar">
              <button id="edit-node-dialog__delete" class="btn-regular btn-regular-outline">Delete</button>
            </div>
          </div>
      </div>
    </div>
    <div id="graph-view__canvas"></div>
    <div class="type_selection" style="display:none">
      <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 class="debug-ui">
    <div class="debug-ui-row">
        <div class="debug-ui-left">
            <a class="save-history" href="#">Save history</a>
        </div>
        <div class="debug-ui-right">
            <a id="replay-history" style="display: none" href="#">Replay history</a>
        </div>
    </div>
    <div class="debug-ui-row">
        <div class="debug-ui-left">
            <div class="save">
                <a href="#">Save</a>
            </div>
        </div>
    </div>
    <div class="debug-ui-row">
    <div class="debug-ui-left">
        <div class="local-storage-load">
            <a href="#">Load</a>
        </div>
    </div>
    <div class="debug-ui-right">
        <div class="url-copy">
            <a href="#">Copy to URL</a>
        </div>
    </div>
    </div>
    <div class="debug-ui-row">
        Import <input type="file" class="file-import" />
    </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 %}