{% extends "template_1.html" %}

{% block scripts %}
  <script src="/files/scripts/dojo.js" type="text/javascript"></script>
  <script src="/files/scripts/ui.js" type="text/javascript"></script>
{% endblock %}

{% block content %}
<div class="wrapper col2">
  <div id="topbar">
    <div id="topnav">
      <ul>
        <li><a href="/">Home</a></li>
        <li class="active"><a href="/analyzer/apps/">Applications</a></li>
        <li><a href="/analyzer/clients/">Clients</a></li>
        <li class="last"><a href="/analyzer/projects/">Projects</a></li>
      </ul>
    </div>
    <br class="clear" />
  </div>
</div>
<div class="wrapper col3">
  <div id="breadcrumb">
    <ul>
      <li class="first">You Are Here</li>
      <li>»</li>
      <li><a href="/">Home</a></li>
      <li>»</li>
      <li><a href="/analyzer/apps/">Applications</a></li>
      <li>»</li>
      <li class="current"><a href="">{{ name }} historical evolution</a></li>
    </ul>
  </div>
</div>
<div class="wrapper col5">
  <div id="container">
    <div id="column">
      <div class="subnav">
        <h2>Quick access</h2>
        <ul>
          <li><a href="/analyzer/apps/time/">Most used by time</a></li>
          <li><a href="/analyzer/apps/users/">Most used by number of users</a></li>
        </ul>
        <h2>Custom analysis</h2>
        <ul>
          <li>
            <a href="#" onclick="return show_or_hide('by_time');">By usage time</a>
            <form id="by_time" class="hidden" action="/analyzer/apps/time/" method="get">
              <ul>
                <li>
                  <label>Project:</label>
                  <input type="text" name="project" maxlength="50"/>
                </li>
                <li>
                  <label>Initial date:</label>
                  <input class="year" type="text" name="iyear" maxlength="4" value="yyyy"/>-
                  <input class="month" type="text" name="imonth" maxlength="2" value="mm"/>-
                  <input class="day" type="text" name="iday" maxlength="2" value="dd"/>
                </li>
                <li>
                  <label>Final date:</label>
                  <input class="year" type="text" name="fyear" maxlength="4" value="yyyy"/>-
                  <input class="month" type="text" name="fmonth" maxlength="2" value="mm"/>-
                  <input class="day" type="text" name="fday" maxlength="2" value="dd"/>
                </li>
                <li>
                  <label>Max. results:</label>
                  <select name="numres">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25">25</option>
                  </select>
                </li>
                <li>
                  <label>&nbsp;</label>
                  <input class="button" type="submit" value="OK"/>
                </li>
              </ul>
            </form>
          </li>
          <li>
            <a href="#" onclick="return show_or_hide('by_users');">By number of users</a>
            <form id="by_users" class="hidden" action="/analyzer/apps/users/" method="get">
              <ul>
                <li>
                  <label>Project:</label>
                  <input type="text" name="project" maxlength="50"/>
                </li>
                <li>
                  <label>Initial date:</label>
                  <input class="year" type="text" name="iyear" maxlength="4" value="yyyy"/>-
                  <input class="month" type="text" name="imonth" maxlength="2" value="mm"/>-
                  <input class="day" type="text" name="iday" maxlength="2" value="dd"/>
                </li>
                <li>
                  <label>Final date:</label>
                  <input class="year" type="text" name="fyear" maxlength="4" value="yyyy"/>-
                  <input class="month" type="text" name="fmonth" maxlength="2" value="mm"/>-
                  <input class="day" type="text" name="fday" maxlength="2" value="dd"/>
                </li>
                <li>
                  <label>Max. results:</label>
                  <select name="numres">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25">25</option>
                  </select>
                </li>
                <li>
                  <label>&nbsp;</label>
                  <input class="button" type="submit" value="OK"/>
                </li>
              </ul>
            </form>
          </li>
          <li>
            <a href="#" onclick="return show_or_hide('historical');">Historical analysis</a>
            <form id="historical" class="hidden" action="/analyzer/app/" method="get">
              <ul>
                <li>
                  <label>Application:</label>
                  <input type="text" name="app_name" maxlength="50"/>
                </li>
                <li>
                  <label>&nbsp;</label>
                  <input class="button" type="submit" value="OK"/>
                </li>
              </ul>
            </form>
          </li>
        </ul>
      </div>
    </div>
    <div id="content">
      {% if chart %}
        <h2>Chart:</h2>
        <div>
          <img src="{{ chart }}" alt="{{ name }} evolution"/>
        </div>
      {% endif %}
      {% if data %}
        <h2>Raw data:</h2>
        <table>
          <thead>
            <tr>
              <th>Month</th>
              <th>Usage time (hours)</th>
            </tr>
          </thead>
          <tbody>
            {% for item in data %}
              {% if forloop.counter0|divisibleby:"2" %}
                <tr class="light">
              {% else %}
                <tr class="dark">
              {% endif %}
                <td>{{ item|first|capfirst }}</td>
                <td>{{ item|last|floatformat:"3" }}</td>
             </tr>
            {% endfor %}
          </tbody>
        </table>
    {% endif %}
    </div>
    <div class="clear"></div>
  </div>
</div>
{% endblock %}