{% load i18n %}
{% load instance_tags %}

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="pull-right toolbar">
      <div class="btn-group">

      </div>
      <span class="btn btn-default btn-xs infobtn" data-container="body" title="{% trans "Report on used resources based on quota statistics." %}"><i class="fa fa-info-circle"></i></span>
    </div>
    <h3 class="no-margin">
      <span class="visible-xs">
        <i class="fa fa-desktop"></i>
        {% trans "Quota" %}
      </span>
      <span class="hidden-xs">
        <i class="fa fa-desktop"></i>
        {% trans "Resources" %}
      </span>
    </h3>
  </div>
  <div class="list-group" id="vm-list-view">
    <div id="dashboard-quota-list">

      {% for metric, quotastats in quotas.items %}
      <div class="list-group-item">
        <span class="index-quota-list-name">
          <span class="quota-label">
            <i class="fa fa-{{ quotastats.icon }}" title="{{ metric }}"></i>
            {{ metric }}
          </span>
            <progress style="width:50%;" title="{{ quotastats.usage }} / {{ quotastats.limit }} " max="{{ quotastats.limit }}" value="{{ quotastats.usage }}"></progress>
          <span class="quota-percentage">
          {% widthratio quotastats.usage quotastats.limit 100 %} %
          </span>
        </span>

      </div>

      {% empty %}
        <div class="list-group-item list-group-item-last">
          {% trans "You have no quota stats available." %}
        </div>
      <div id="empty-vm-help">
        {% trans "Please try reloading." %}<br />

      </div>
      {% endfor %}
    </div>
    <div class="list-group-item list-group-footer">
      <div class="row">

      </div>
    </div>
  </div>

</div>