{% extends "base.html" %}

{% macro mod_li(m, class) %}
<li class="{{ class }}"> 
  <div class="name"> {{ m.name }} </div> 
  <div class="version"> {{ m.version }}</div>
  <div class="clear"></div>
  <div class="hash" title="{{ m.path }}">{{ m.code_hash }}</div>
</li>
{% endmacro %}

{% macro env_field(name, value) %}
  <span class="key"> {{ name }} </span>
  <span class="equal"> = </span>
  <span class="value"> {{ value }} </span>
{% endmacro %}

{% macro env_li(m, class) %}
<li class="{{ class }}">
  {{ env_field(m.name, m.value) }}
</li>
{% endmacro %}

{% macro env_cli(rem, add) %}
<li>
  <div class="dbefore">{{ env_field(rem.name, rem.value) }}</div>
  <div class="dafter">{{ env_field(add.name, add.value) }}</div>
</li>
{% endmacro %}


{% macro fa_field(class, title, value) %}
  <div class="{{ class }}" title="{{ title }}"> {{ value }}</div>
{% endmacro %}
{% macro fa_li(m, class) %}
  <li class="{{ class }}">
    {{ fa_field('name', 'Name', m.name) }}
    {{ fa_field('mode', 'Mode', m.mode) }}
    {{ fa_field('buffering', 'Buffering', m.buffering) }}
    <div class="clear"></div>
    {{ fa_field('timestamp', 'Time', m.timestamp) }}
    {{ fa_field('content_hash_before hash', 'Content hash before', m.content_hash_before) }}
    {{ fa_field('content_hash_after hash', 'Content hash after', m.content_hash_after) }}
    {{ fa_field('stack', 'Stack', m.stack) }}
  </li>
{% endmacro %}
{% macro fa_cfield(class, title, c1, c2) %}
  {% if c1 == c2 %}
    <div class="{{ class }}" title="{{ title }}"> {{ c1 }}</div> 
  {% else %}
    <div class="{{ class }} dbefore" title="{{ title }}"> {{ c1 }}</div> 
    <div class="{{ class }} dafter" title="{{ title }}"> {{ c2 }}</div> 
  {% endif %}
{% endmacro %}

{% macro info(class, name, c1, c2) %}
  {% if c1 == c2 %}
    <span class="attr"><span class="desc">{{ name }}: </span><span class="{{ class }}"> {{ c1 }} </span></span>
  {% else %}
    <span class="attr"><span class="desc dbefore">{{ name }}: <span class="{{ class }}"> {{ c1 }} </span></span></span>
    <span class="attr"><span class="desc dafter">{{ name }}: <span class="{{ class }}"> {{ c2 }} </span></span></span>
  {% endif %}
{% endmacro %}


{% block css %}
<link rel="stylesheet" href="/trial_graph.css">
<link rel="stylesheet" href="/shared_graph.css">
<link rel="stylesheet" href="/index.css">
<link rel="stylesheet" href="/diff.css">
{% endblock %}

{% block body %}
  <div id="splitter">
    <div id="show">
      <div id="graphbox" class="now-trial now">
        <div id="graphselector" style="display: none;">
          <div class="graph-attr">
            <label for="graphtype" title="Select the graph type">Graph Type:</label>
            <select id="graphtype" class="select-style">
              <option value="tree" data-description="Activation tree. Edges represent order of execution">Tree</option>
              <option value="no_match" data-description="Activation tree presented as a Graph">No Match</option>
              <option value="exact_match" data-description="Calls have counting independent from caller activations">Exact Match</option>
              <option selected value="namespace_match" data-description="Calls are combined and a function may have more than one call workflow">Namespace Match</option>
            </select>
          </div>
          <div class="graph-attr">
            <label for="difflevel" title="Select the deepness of diff">Neighborhood:</label>
            <select id="difflevel" class="select-style">
              <option value="0" data-description="Use LCS for basic matching">0 - LCS</option>
              <option value="1" data-description="Match remaining nodes">1 - Remaining nodes</option>
              <option selected value="2" data-description="Permutate nodes on the same height">2 - Permutate on the same height</option>
              <option value="3" data-description="Permutate any node">3 - Permutate anything</option>
            </select>
          </div>
          <div class="graph-attr time-attr">
            <label for="graphlimit" title="Limit the execution time (seconds)">Time Limit:</label>
            <input id="graphlimit" type="number" name="graphlimit" value="0" class="select-style">
          </div>
          <div class="graph-attr">
            <input type="checkbox" name="use_cache" value="on" checked id="use_cache">
            <label for="use_cache" title="Select the graph type">Use Cache</label>
          </div>
          <a href="#" class="link-button" id="reload_graph"><i class="fa fa-refresh"></i> Reload Graph</a>
        </div>
        <form class="toolbar">
          <label title="Change graph type" id="show-graph-toolbar"><span id="graph-title">Namespace Match</span> <i class="fa fa-circle"></i></label>

          <input id="trial-toolbar-trial-fullname" type="checkbox" name="trial-toolbar-trial-fullname" value="show">
          <label for="trial-toolbar-trial-fullname" title="Hide activations full name"><i class="fa fa-font"></i></label>

          <input id="trial-toolbar-tooltips" type="checkbox" name="trial-toolbar-tooltips" value="show">
          <label for="trial-toolbar-tooltips" title="Show tooltips on mouse hover"><i class="fa fa-comment"></i></label>
        </form>
        <div id="loadingDiv">
          <i class="fa fa-spinner fa-pulse"></i>
        </div>
        <div id="graphs">
          <div id="graph" class="now-trial-graph"></div>
          <div class="bottom">
            <div id="graphA" class="now-trial-graph"></div>
            <div id="graphB" class="now-trial-graph"></div>

          </div>
        </div>
      </div>
      <div id="side">
        <div id="side-internal">
          <div id="main">
            <h1><span class="dbefore">Trial <span id="trial1">{{ trial1.id }}</span></span> &lt;-&gt; <span class="dafter">Trial <span id="trial2">{{ trial2.id }}</span></span></h1>
            {% if not 'code_hash' in trial %}
              <h3 class="hash"> {{ trial1.code_hash }} </h3>
            {% else %}
              <h3 class="hash dbefore"> {{ trial1.code_hash }} </h3>
              <h3 class="hash dafter"> {{ trial2.code_hash }} </h3>
            {% endif %}
            <span class="attr"><span class="desc">Script: </span><span class="script"> {{ trial1.script }}</span></span>
            {{ info('start', 'Start', trial1.start, trial2.start)}}
            {{ info('finish', 'Finish', trial1.finish, trial2.finish)}}
            {{ info('duration', 'Duration', trial1.duration_text, trial2.duration_text)}}
            {% if not 'arguments' in trial %}
              {% if trial1.arguments %}
                <span class="attr"><span class="desc">Arguments: <span class="arguments"> {{ trial1.arguments }}</span></span></span>
              {% endif %}
            {% else %}
              {% if trial1.arguments %}
                <span class="attr"><span class="desc dbefore">Arguments: <span class="arguments"> {{ trial1.arguments }}</span></span></span>
              {% endif %}
              {% if trial2.arguments %}
                <span class="attr"><span class="desc dafter">Arguments: <span class="arguments"> {{ trial2.arguments }}</span></span></span>
              {% endif %}
            {% endif %}
          </div>
          {% if modules_added or modules_removed or modules_replaced %}
            <div id="modules">
              <div class="fold">
                <i class="fa fa-minus"></i><span> Modules </span>
              </div>
              <div class="foldable">
                <ul class="mod-list">
                  {% for m in modules_removed %}
                    {{ mod_li(m, 'libefore') }}
                  {% endfor %}
                  {% for m in modules_added %}
                    {{ mod_li(m, 'liafter') }}
                  {% endfor %}
                  {% for rem, add in modules_replaced %}
                    <li> 
                      <div class="name"> {{ rem.name }} </div> 
                      <div class="version"> <div class="dbefore"> {{ rem.version }}</div><div class="dafter"> {{ add.version }}</div></div>
                      <div class="clear"></div>
                      <div class="hash dbefore" title="{{ rem.path }}">{{ rem.code_hash }}</div>
                      <div class="hash dafter" title="{{ add.path }}">{{ add.code_hash }}</div>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          {% endif %}
          {% if env_added or env_removed or env_replaced %}
            <div id="environment">
              <div class="fold">
                <i class="fa fa-minus"></i><span> Environment </span>
              </div>
              <div class="foldable">
                <ul class="env-list">
                  {% for m in env_removed %}
                    {{ env_li(m, 'libefore') }}
                  {% endfor %}
                  {% for m in env_added %}
                    {{ env_li(m, 'liafter') }}
                  {% endfor %}
                  {% for rem, add in env_replaced %}
                    {{ env_cli(rem, add) }}
                  {% endfor %}
                </ul>
              </div>
            </div>
          {% endif %}
          {% if fa_added or fa_removed or fa_replaced %}
            <div id="file_accesses">
              <div class="fold">
                <i class="fa fa-minus"></i><span> File Accesses </span>
              </div>
              <div class="foldable">
                <ul class="fac-list">
                  {% for m in fa_removed %}
                    {{ fa_li(m, "libefore") }}  
                  {% endfor %}
                  {% for m in fa_added %}
                    {{ fa_li(m, "liafter") }}  
                  {% endfor %}
                  {% for rem, add in fa_replaced %}
                    <li>
                      {{ fa_cfield('name', 'Name', rem.name, add.name) }}
                      {{ fa_cfield('mode', 'Mode', rem.mode, add.mode) }}
                      {{ fa_cfield('buffering', 'Buffering', rem.buffering, add.buffering) }}
                      <div class="clear"></div>
                      {{ fa_cfield('timestamp', 'Time', rem.timestamp, add.timestamp) }}
                      {{ fa_cfield('content_hash_before hash', 'Content hash before', rem.content_hash_before, add.content_hash_before) }}
                      {{ fa_cfield('content_hash_after hash', 'Content hash after', rem.content_hash_after, add.content_hash_after) }}
                      {{ fa_cfield('stack', 'Stack', rem.stack, add.stack) }}
                    </li>

                  {% endfor %}
                </ul>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    
  </div>
{% endblock %}

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