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

{% load filters %}

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

{% block page.body %}
<div class="maincol {% block innerpage.class %}{% endblock %}"> 

	<h2>RESOURCE USAGE</h2>
	<div class="stats clearfix">
		<ul>
			{% for rdata in resource_usage %}
            <li class="clearfix  {{ rdata.load_class }} {{ rdata.name|get_value_after_dot }}" 
                    data-resourcekey="{{ rdata.name }}" data-units="{{ rdata.unit }}">
		 			<div class="img-wrap">&nbsp;</div>
                    <div class="info" data-currvalue="{{ rdata.currValue }}"
                                      data-maxvalue="{{ rdata.maxValue }}">
						<h3>{{ rdata.report_desc }}</h3>
						<p>							
						{% if rdata.unit == 'bytes' %}
                        <span class="currValue">
                            {{ rdata.currValue }}
                        </span> out of  
                        <span class="maxValue">
                            {{ rdata.maxValue }}
                        </span>
                        {% else %}
                        <span class="currValue">
                            <span class="value">{{ rdata.currValue }}</span>
                        </span>
                        out of  
                        <span class="maxValue">
                            <span class="value">{{ rdata.maxValue }}</span>
                            <span class="unit">{{ rdata.unit }}</span>
                        </span>
						{% endif %}
                        {{rdata.pluralized_display_name}}
						</p>
					</div>
					<div class="bar" data-steps="">
						<div>
							
							<span style="width:{{ rdata.ratio_limited|floatformat }}%;" {% if rdata.ratio > 22 %}class="hovered"{% endif %}>
                               
							</span>
							  <em data-value="{{ rdata.ratio }}" class="value">{{ rdata.ratio|floatformat }}&#37; &nbsp;&nbsp;</em>	
						</div>
					</div>
		 		</li>
		 	{% endfor%}
		</ul>
			 
	</div>    
</div>
<script>
    $(document).ready(function(){
        var usageClient = new UsageClient({
            'url': '{% url resource_usage %}?json=1',
            'dataType': 'json',
            'container': 'div.stats'
        });
        
        window.setInterval(function() {
            usageClient.load();
        }, {{ usage_update_interval }});
        usageClient.load();
    })

</script>
{% endblock %}