{% load i18n sizeformat %}
<div class="quota-dynamic">
  <h3 class="quota-heading">{% trans "Usage Summary" %}</h3>
</div>
<div class="usage_info_wrapper">
  <form action="?" method="get" id="date_form" class="form-inline">
    <h3>{% trans "Select a period of time to query its usage:" %}</h3>
    <div class="datepicker form-group">
      {% blocktrans with start=form.start %}
      <label>From:</label> {{ start }}{% endblocktrans %}
    </div>
    <div class="datepicker form-group">
      {% blocktrans with end=form.end %}
      <label>To:</label>{{ end }}{% endblocktrans %}
    </div>
    <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
    <small>{% trans "The date should be in YYYY-mm-dd format." %}</small>
  </form>
  <p id="activity">
    <span><strong>{% trans "Active Instances:" %}</strong> {{ usage.summary.instances|default:'0' }}</span>
    <span><strong>{% trans "Active RAM:" %}</strong> {{ usage.summary.memory_mb|mb_float_format|default:'0' }}</span>
    <span><strong>{% trans "This Period's VCPU-Hours:" %}</strong> {{ usage.summary.vcpu_hours|floatformat:2|default:'0' }}</span>
    <span><strong>{% trans "This Period's GB-Hours:" %}</strong> {{ usage.summary.disk_gb_hours|floatformat:2|default:'0' }}</span>
    <span><strong>{% trans "This Period's RAM-Hours:" %}</strong> {{ usage.summary.memory_mb_hours|floatformat:2|default:'0' }}</span>
  </p>
</div>