{% extends "base.html" %}
{% load url from future %}
{% block title %}{{ block.super }}: Changes{% endblock %}

{% block navigation %}
    {{ block.super }}
{% endblock %}
{% block nav-changes %}class="current"><a href="{% url "changes" %}">Changes</a>{% endblock %}

{% block body %}
<div id="sidebar">
<div class="sidebox">
  <div class="boxhead"><h2>Environment</h2></div>
  <div class="boxbody">
    <ul>
    {% for env in environments %}
      <li title="{{ env.os }}, {{ env.cpu }}">
        <input id="env{{ env.id }}" type="radio" name="environment" value="{{ env.id }}" />
        <label for="env{{ env.id }}">{{ env }}</label>
      </li>
    {% endfor %}
    </ul>
  </div>
</div>

<div id="executable" class="sidebox">
  <div class="boxhead"><h2>Executable</h2></div>
  <div class="boxbody">
    {% if executables|length > 1 %}<ul>{% endif %}{% for proj, execs in executables.items %}
      <ul>{% if executables|length > 1 %}{{ proj }}{% endif %}{% for exec in execs|dictsort:"name" %}
        <li title="{{ exec.description }}"><!-- the input id != value. It is used for exeutable color order -->
          <input id="executable{{ exec.id }}" type="radio" name="executable" value="{{ exec.id }}" />
          <label for="executable{{ exec.id }}">{{ exec }}</label><div class="seriescolor"></div>
        </li>{% endfor %}
      </ul>
    {% endfor %}
    {% if executables|length > 1 %}</ul>{% endif %}
  </div>
</div>

<div id="options" class="sidebox">
  <div class="boxhead"><h2>Options</h2></div>
  <div class="boxbody">
  <ul>
    <li title="Trend since a given number of tested revisions ago. Average of 3 revisions">Trend for last<br/>
      <select id="trend">
      {% for trend in trends %}<option value="{{ trend }}">{{ trend }}</option>{% endfor %}
      </select> revisions
    </li>
  </ul>
  </div>
</div>

</div>

<div id="configbar">
  <span class="options">Results for revision <select id="revision"></select></span>
  <a id="permalink" href="#">Permalink</a>
</div>
<div id="content" class="clearfix">
<div id="contentwrap"></div>
</div>
{% endblock %}

{% block extra_body %}
{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/changes.js"></script>
<script type="text/javascript">
    var TIMELINE_URL = "{% url "timeline" %}";

    $(function() {
        Changes.config({
            changethres: {{ defaultchangethres }},
            trendthres: {{ defaulttrendthres }}
        });

        Changes.init({
            project: "{{ defaultexecutable.project }}",
            executable: "{{ defaultexecutable.id }}",
            environment: "{{ defaultenvironment.id }}",
            revision: "{{ selectedrevision.commitid }}",
            trend: "{{ defaulttrend }}",
            projectmatrix: eval({{ projectmatrix|safe }}),
            revisionlists: eval({{ revisionlists|safe }})
        });
    });
</script>
{% endblock %}