{% extends "twocols.html" %}{% load i18n %}
{% block pagetitle %}{% trans "Graphical statistics" %}{% endblock %}
{% block html_head %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}stats/css/stats.css" />
<script type="text/javascript" src="{{ STATIC_URL }}js/history.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/autocompleter.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}stats/js/stats.js"></script>
<script type="text/javascript">
function get_domains_list(container) {
    $.getJSON("{% url modoboa.admin.views.domains_list %}", function(data) {
        container.value = data;
    });
}

$(document).ready(function() {
    var stats = new Stats({
        graphurl: "{% url modoboa.extensions.stats.views.graphs %}",
        deflocation: "{{ deflocation|safe }}",
        language: "{{ LANGUAGE_CODE }}"
    });
});
</script>
{% endblock %}
{% block leftcol %}
<div id="periods" class="well sidebar-nav">
  <ul class="nav nav-list">
    <li class="nav-header">
      {% trans "Filter" %}
    </li>
    <li>
      <div class="input-prepend input-append">
        <span class="add-on"><i class="icon-search"></i></span>
        <input class="span10" id="searchquery" type="text" value="{% trans 'Search a domain' %}">
      </div>
    </li>
    <li class="nav-header">
      {% trans "Predefined time ranges" %}
    </li>
    {% for p in periods %}<li class="period">
      <a href="#" class="period_selector" data-period="{{ p.name }}">{% trans p.label %}</a>
    </li>
    {% endfor %}
    <li class="nav-header">
      {% trans "Custom time range" %}
    </li>
    <li>
      <form class="form-inline">
        <span id="custom-period">
          <div class="input-prepend">
            <span class="add-on"><i class="icon-indent-left"></i></span><input id="id_from" class="span10" name="date_from" value="{{ start }}" type="text" />
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-indent-right"></i></span><input id="id_to" class="span10" name="date_to" value="{{ end }}" type="text" />
          </div>
          <button class="btn" id="customsend">{% trans "Apply" %}</button>
        </span>
      </form>
    </li>
  </ul>
</div>
{% endblock %}
{% block apparea %}
<div id="graphs" class="tabbable">
  <ul class="nav nav-tabs">{% for id, gset in graph_sets.items %}
    <li {% if forloop.first %}class="active"{% endif %}>
      <a href="#graphs_{{ gset.html_id }}" data-toggle="tab">{{ gset.title }}</a>
    </li>
  </ul>{% endfor %}
  <div class="tab-content">{% for id, gset in graph_sets.items %}
    <div class="tab-pane {% if forloop.first %}active{% endif %}" id="graphs_{{ gset.html_id }}"></div>
  </div>{% endfor %}
</div>
{% endblock %}