{% extends "im/account_base.html" %}

{% load filters astakos_tags %}

{% block headjs %}
{{ block.super }}
<script src="{{ IM_STATIC_URL }}js/usage.js"></script>	
{% endblock %}

{% block page.title %}Usage{% endblock %}

{% block page.body %}

<script id="quotaTpl" type="text/template">
  {% verbatim %}
  {{#resources}}
  <li class="clearfix {{ resource_name }} {{ usage.cls }}" 
      data-resource="{{ name }}">
  <div class="img-wrap">&nbsp;</div>
  <div class="info" data-currvalue="" data-maxvalue="">
    <h3>{{ report_desc }}</h3>
    <p>
      <span class="currValue">{{ usage.curr }}</span> out of 
      <span class="maxValue">{{ usage.max }}</span> {{ report_desc }}
    </p>
  </div>
  <div class="bar">
    <div>
        <span style="width:{{ usage.perc }}%"></span>
        <em 
            class="value" 
            style="left: {{ usage.label_left }}%; color: {{ usage.label_color }}">
            {{ usage.perc }}%
        </em>
    </div>
  </div>
  </li>
  {{/resources}}
  {% endverbatim %}
</script>

<div class="maincol {% block innerpage.class %}{% endblock %}"> 
    <h2>RESOURCE USAGE</h2>
    <div id="quota-container">
    </div>
</div>
<script>
$(document).ready(function(){
  var usageView = new UsageView({
    'url': '{% url astakos-api-quotas %}',
    'cookie_name': '{{ token_cookie_name|safe }}',
    'dataType': 'json',
    'container': '#quota-container',
    'quotas': {{ current_usage|safe }},
    'meta': {
      'resources': {{ resource_catalog|safe }},
      'groups': {{ resource_groups|safe }},
      'resources_order': {{ resources_order|safe }}
    }
  });
  window.usageView = usageView;

  window.setInterval(function(){
    window.usageView.updateQuotas();
  }, {{ usage_update_interval }});

})
</script>
{% endblock %}