{% load i18n horizon humanize bootstrap %}

{% block help_message %}
{% endblock %}

<h4>{% trans "Flavor Details" %}</h4>
<table class="flavor_table table table-striped table-fixed">
  <tbody>
    <tr><td class="flavor_name">{% trans "Name" %}</td><td><span id="flavor_name" class="truncate"></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">
    <strong class="pull-left">{% trans "Number of Instances" %}</strong>
    <span class="pull-right">
      {% blocktrans trimmed with used=usages.totalInstancesUsed|intcomma quota=usages.maxTotalInstances|intcomma|quotainf %}
      {{ used }} of {{ quota }} Used
      {% endblocktrans %}
    </span>
  </div>

 {{ minifyspace }}
  <div id="{{ resize_instance|yesno:"quota_resize_instance,quota_instances" }}"
       class="quota_bar"
       data-progress-indicator-flavor
       data-quota-limit="{{ usages.maxTotalInstances }}"
       data-quota-used="{{ usages.totalInstancesUsed }}">
    {% widthratio usages.totalInstancesUsed usages.maxTotalInstances 100 as instance_percent %}
    {% bs_progress_bar instance_percent 0 %}
  </div>
 {{ endminifyspace }}

  <div class="quota_title">
    <strong class="pull-left">{% trans "Number of VCPUs" %}</strong>
    <span class="pull-right">
      {% blocktrans trimmed with used=usages.totalCoresUsed|intcomma quota=usages.maxTotalCores|intcomma|quotainf %}
      {{ used }} of {{ quota }} Used
      {% endblocktrans %}
    </span>
  </div>

  {{ minifyspace }}
  <div id="quota_vcpus"
       class="quota_bar"
       data-progress-indicator-flavor
       data-quota-limit="{{ usages.maxTotalCores }}"
       data-quota-used="{{ usages.totalCoresUsed }}">
    {% widthratio usages.totalCoresUsed usages.maxTotalCores 100 as vcpu_percent %}
    {% bs_progress_bar vcpu_percent 0 %}
  </div>
  {{ endminifyspace }}

  <div class="quota_title">
    <strong class="pull-left">{% trans "Total RAM" %}</strong>
    <span class="pull-right">
      {% blocktrans trimmed with used=usages.totalRAMUsed|intcomma quota=usages.maxTotalRAMSize|intcomma|quotainf %}
      {{ used }} of {{ quota }} MB Used
      {% endblocktrans %}
    </span>
  </div>

  {{ minifyspace }}
  <div id="quota_ram"
       class="quota_bar"
       data-progress-indicator-flavor
       data-quota-limit="{{ usages.maxTotalRAMSize }}"
       data-quota-used="{{ usages.totalRAMUsed }}">
    {% widthratio usages.totalRAMUsed usages.maxTotalRAMSize 100 as vcpu_percent %}
    {% bs_progress_bar vcpu_percent 0 %}
  </div>
  {{ endminifyspace }}

  {% if cinder_enabled %}
  <div class="quota_title">
    <strong class="pull-left">{% trans "Number of Volumes" %}</strong>
    <span class="pull-right">
      {% blocktrans with used=usages.totalVolumesUsed|intcomma quota=usages.maxTotalVolumes|intcomma|quotainf %}
      {{ used }} of {{ quota }} Used
      {% endblocktrans %}
    </span>
  </div>
  <div id="quota_volume"
       class="quota_bar"
       data-progress-indicator-flavor
       data-quota-limit="{{ usages.maxTotalVolumes }}"
       data-quota-used="{{ usages.totalVolumesUsed }}">
    {% widthratio usages.totalVolumesUsed usages.maxTotalVolumes 100 as volume_percent %}
    {% bs_progress_bar volume_percent 0 %}
  </div>

  <div class="quota_title">
    <strong class="pull-left">{% trans "Total Volume Storage" %}</strong>
    <span class="pull-right">
      {% blocktrans with used=usages.totalGigabytesUsed|intcomma quota=usages.maxTotalVolumeGigabytes|intcomma|quotainf %}
      {{ used }} of {{ quota }} GiB Used
      {% endblocktrans %}
    </span>
  </div>
  <div id="quota_volume_storage"
       class="quota_bar"
       data-progress-indicator-flavor
       data-quota-limit="{{ usages.maxTotalVolumeGigabytes }}"
       data-quota-used="{{ usages.totalGigabytesUsed }}">
     {% widthratio usages.totalGigabytesUsed usages.maxTotalVolumeGigabytes 100 as volume_storage_percent %}
     {% bs_progress_bar volume_storage_percent 0 %}
  </div>
  {% endif %}

</div>


<script type="text/javascript" charset="utf-8">
  some_disabled_msg = '{{_("Some flavors not meeting minimum boot source requirements have been disabled.")|escapejs }}';
  all_disabled_msg = '{{_("No flavors meet minimum criteria for selected boot source.")|escapejs }}';

  if(typeof horizon.Quota !== 'undefined') {
    horizon.Quota.initWithFlavors({{ flavors|safe|default:"{}" }});
    horizon.Quota.initWithImages({{ images|safe|default:"{}"}}, some_disabled_msg, all_disabled_msg);
  } else {
    addHorizonLoadEvent(function() {
      horizon.Quota.initWithFlavors({{ flavors|safe|default:"{}" }});
      horizon.Quota.initWithImages({{ images|safe|default:"{}"}}, some_disabled_msg, all_disabled_msg);
    });
  }
</script>