{% import "utils.html" as utils %}

{% extends "layout.html" %}
{% set components = [(ts.name, v4_url_for(".v4_global_status"))] %}
{% block head %}
        <link type="text/css" rel="stylesheet"
              href="{{ url_for('.static', filename='v4_global_status.css') }}"/>
        <script async src="{{ url_for('.static', filename='popup.js') }}"></script>
        <script async src="{{ url_for('.static', filename='sorttable.js') }}"></script>
        <script language="javascript" type="text/javascript"
                src="{{ url_for('.static',
                     filename='jquery/1.7.2/jquery-1.7.2.min.js') }}"></script>
        <script language="javascript" type="text/javascript"
                src="{{ url_for('.static',
                     filename='jquery/1.7.2/jquery-ui-1.8.22.custom.min.js') }}"></script>
        <script language="javascript" type="text/javascript"
                src="{{ url_for('.static',
                     filename='jquery/jquery.scrolltofixed/jquery-scrolltofixed.min.js') }}"></script>
        <script language="javascript" type="text/javascript"
                src="{{ url_for('.static',
                     filename='jquery/jquery.formdefaults/jquery.formdefaults.min.js') }}"></script>
        <script language="javascript" type="text/javascript"
                src="{{ url_for('.static',
                     filename='v4_global_status.js') }}"></script>
        
        <style type="text/css">
          {# Generate css classes to show/hide groups and machines #}
          
          {% for m in machines %}
             table.hide-{{ m.css_name }} td.{{ m.css_name }},
             table.hide-{{ m.css_name }} th.{{ m.css_name }},
             table.hidenot-{{ m.css_name }} td.not-{{ m.css_name }},
             table.hidenot-{{ m.css_name }} th.not-{{ m.css_name }} {
                 display: none;
             }
          {% endfor %}
        </style>
        
        <script language="javascript" type="text/javascript">
          $(document).ready(function() {
            v4_global_status.init("{{ ts.get_field_index(selected_field) }}");
          });
        </script>
{% endblock %}

{% block title %}Global Status - {{ selected_field.title }}{% endblock %}

{% block page_header %}
        {# LNT Instance Title #}
        <a href="{{url_for('.index')}}" class="header-title">
          <h2>{{old_config.name}}</h2>
        </a>

        {# Navigation Breadcrumbs #}
        <span id="nav-breadcrumbs">
          <ul id="navlist" class="nav">
            {% for short_name,path in components %}
            <li><a href="{{ path }}">{{short_name}}</a></li>
            <li>|</li>
            {% endfor %}
            <li>{{ self.title() }}</li>
          </ul>
        </span>

        {# Database Selector #}
        <span id="nav-dbselector">
          <form method="get" action="{{ url_for('.select_db') }}" class="nav">
            <input type="hidden" name="path" value="{{ request.path }}"/>
            <label>Database:</label>
            <select name="db" onchange="submit()">
              {% for name in old_config.databases.keys()|sort %}
              <option{{" selected" if name == g.db_name else ""}}>{{ name }}</option>
              {% endfor %}
            </select>
            <input type="submit" value="Go"/>
          </form>
        </span>
        
        {# Settings Wrench #}
        <img id="settings-wrench" src="{{ url_for('.static', filename='cog.svg') }}"></img>
{% endblock %}

{% block body %}

<div id="emperor-control">
  <div id="right-king-control" class="control-panel">
    <h3>Select a Comparison</h3>
    <div id="revision-control-panel">
      <form>
        <table>
          <tr>
            <td>Field:</td>
            <td>
              <select name="field" class="field-form">
                {% for f in fields %}
                  {% if f == selected_field %}
                    <option value="{{ f.name }}" selected="selected">{{ f.title }}</option>
                  {% else %}
                    <option value="{{ f.name }}">{{ f.title }}</option>
                  {% endif %}
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td>Revision:</td>
            <td><input class="baseline-form" name="revision" type="text" value="{{ selected_revision }}"/></td>
          </tr>
          <tr>
            <td><input class="baseline-form" type="submit"/></td>
          </tr>
        </table>
      </form>
    </div>    
  </div>
  
  <div id="left-king-control" class="control-panel">  
    <h3>Toggle Machine Visibility</h3>
    <div id="toggle-machine-control-panel">
      <ul>
        {% for m in machines %}
        <li>
          <div class="checkbox">
            <label>
              <input id="checkbox-{{ m.css_name }}" checked="checked" type="checkbox" onclick="v4_global_status.toggle_column_visibility('{{ m.css_name }}');"/>
              {{ m.name }}
            </label>
          </div>
        </li>
        {% endfor %}
        <li><button onclick="v4_global_status.update_table();">Set Visibility</button><button onclick="v4_global_status.reset_table();">Reset</button></li>
      </ul>
    </div>
  </div>
</div>

<table id="data-table" class="sortable_rev">
  <tr id="data-table-header">
    <th class="label-header">Test</th>
    <th id="worst-time-header" class="data-header worst-time">Worst Time</th>
    {% for m in machines %}
    <th class="data-header {{ m.css_name }}">{{ m.name }}</th>
    {% endfor %}
  </tr>
  {% for row in tests %}
  <tr class="data-row">
    <td class="row-head">
      {{ row[0][1] }}
    </td>
    {{ row[1]|aspctcell("data-cell worst-time")|safe }}
    {% for cr, run_id in row[2:] %}
      {% set machine = machines[loop.index0] %}
      {{ cr.pct_delta|aspctcell("normal-data-cell data-cell " + machine.css_name,
                                attributes={ 'test_id': row[0][0],
                                             'machine_id': machine.id })
         |safe }}
    {% endfor %}
  </tr>
  {% endfor %}
</table>
{% endblock %}