{% extends "base.html" %}
{% block css %}
<link rel="stylesheet" href="index.css">
{% endblock %}
{% block body %}
      <div id="splitter">
        <div id="top">
          <div class="filter"> 
            <div class="internal">
              <select name="script"> 
                <option value="*"> All Scripts </option>
                {% for script in scripts %}
                  <option value="{{ script }}">{{ script }}</option>
                {% endfor %}
              </select>
              <select name="execution">
                <option value="*"> All Statuses </option>
                <option value="finished"> Finished Trials </option>
                <option value="unfinished"> Unfinished Trials </option>
                <option value="backup"> Backup Trials </option>
              </select>

              <a href="#" id="reload"><i class="fa fa-refresh"></i> Reload</a>
            </div>
          </div>
          <div id="history" style="overflow: auto">
            <div class="toolbar">
               <a class="toollink" id="restore-history-zoom" href="#" title="Restore zoom"><i class="fa fa-binoculars"></i></a>
               <input id="show-history-tooltips" type="checkbox" name="show-history-tooltips" value="show">
               <label for="show-history-tooltips" title="Show tooltips on mouse hover"><i class="fa fa-comment"></i></label>
            </div>
            <div id="historygraph">
            </div>  
          </div>
        </div>
        <div id="show">
          <div id="graphbox">
            <form class="toolbar">
              <input id="indgraph" type="radio" name="graphtype" value="independent" checked>
              <label for="indgraph" title="Calls have counting independent from caller activations">Exact Match</label>
              <input id="combgraph" type="radio" name="graphtype" value="combined">
              <label for="combgraph" title="Calls are combined and a function may have more than one call workflow">Combined</label>
              <input id="showtooltips" type="checkbox" name="showtooltips" value="show">
              <label for="showtooltips" title="Show tooltips on mouse hover"><i class="fa fa-comment"></i></label>
            </form>
            <div id="graph"></div>
          </div>
          <div id="side">
            <div id="side-internal"></div>

          </div>
        </div>
      </div>
{% endblock %}
{% block js %}
  <script src="d3-v3.4.11/d3.min.js" charset="utf-8"></script>
  <script src="history_graph.js" charset="utf-8"></script>
  <script src="trial_graph.js" charset="utf-8"></script>
  <script src="trials.js" charset="utf-8"></script>
{% endblock %}