{% load i18n horizon humanize %}

<p>{% blocktrans %}Specify the details for launching an instance.{% endblocktrans %}</p>
<p>{% blocktrans %}The chart below shows the resources used by this project in relation to the project's quotas.{% endblocktrans %}</p>

<h4>{% trans "Flavor Details" %}</h4>
<table class="flavor_table table-striped">
  <tbody>
    <tr><td class="flavor_name">{% trans "Name" %}</td><td><span id="flavor_name"></span></td></tr>
    <tr><td class="flavor_name">{% trans "VCPUs" %}</td><td><span id="flavor_vcpus"></span></td></tr>
    <tr><td class="flavor_name">{% trans "Root Disk" %}</td><td><span id="flavor_disk"> </span> {% trans "GB" %}</td></tr>
    <tr><td class="flavor_name">{% trans "Ephemeral Disk" %}</td><td><span id="flavor_ephemeral"></span> {% trans "GB" %}</td></tr>
    <tr><td class="flavor_name">{% trans "Total Disk" %}</td><td><span id="flavor_disk_total"></span> {% trans "GB" %}</td></tr>
    <tr><td class="flavor_name">{% trans "RAM" %}</td><td><span id="flavor_ram"></span> {% trans "MB" %}</td></tr>
  </tbody>
</table>

<div class="quota-dynamic">
  <h4>{% trans "Project Limits" %}</h4>
  <div class="quota_title clearfix">
    <strong>{% trans "Number of Instances" %}</strong>
    {% blocktrans with used=usages.totalInstancesUsed|intcomma quota=usages.maxTotalInstances|intcomma %}<p>{{ used }} of {{ quota }} Used</p>{% endblocktrans %}
  </div>
  <div id="quota_instances" class="quota_bar" data-progress-indicator-flavor data-quota-limit="{{ usages.maxTotalInstances }}" data-quota-used="{{ usages.totalInstancesUsed }}">
  </div>

  <div class="quota_title clearfix">
    <strong>{% trans "Number of VCPUs" %}</strong>
    {% blocktrans with used=usages.totalCoresUsed|intcomma quota=usages.maxTotalCores|intcomma %}<p>{{ used }} of {{ quota }} Used</p>{% endblocktrans %}
  </div>
  <div id="quota_vcpus" class="quota_bar" data-progress-indicator-flavor data-quota-limit="{{ usages.maxTotalCores }}" data-quota-used="{{ usages.totalCoresUsed }}">
  </div>

  <div class="quota_title clearfix">
    <strong>{% trans "Total RAM" %}</strong>
    {% blocktrans with used=usages.totalRAMUsed|intcomma quota=usages.maxTotalRAMSize|intcomma %}<p>{{ used }} of {{ quota }} MB Used</p>{% endblocktrans %}
  </div>
  <div id="quota_ram" data-progress-indicator-flavor data-quota-limit="{{ usages.maxTotalRAMSize }}" data-quota-used="{{ usages.totalRAMUsed }}" class="quota_bar">
  </div>
</div>

<script type="text/javascript" charset="utf-8">
  if(typeof horizon.Quota !== 'undefined') {
    horizon.Quota.initWithFlavors({{ flavors|safe|default:"{}" }});
  } else {
    addHorizonLoadEvent(function() {
      horizon.Quota.initWithFlavors({{ flavors|safe|default:"{}" }});
    });
  }
</script>