{% load i18n %}
{# the vCPUs a host has given its VMs: given, from views.shown_capacity #}
<div class="fs-4 lh-sm {% if given.ratio > 4 %}text-danger{% elif given.ratio > 2 %}text-warning-emphasis{% endif %}">{{ given.ratio|floatformat:1 }}:1</div>
<div class="small text-body-secondary mb-1">{% blocktrans count counter=given.vcpus.all %}{{ counter }} vCPU{% plural %}{{ counter }} vCPUs{% endblocktrans %} {% blocktrans count counter=given.cpus %}on {{ counter }} CPU{% plural %}on {{ counter }} CPUs{% endblocktrans %}</div>
{# running VMs' vCPUs, then shut-off VMs', on a scale that holds the CPUs or all given, whichever is more #}
<div class="progress-stacked" style="--bs-progress-height: 0.6rem;" title="{% trans "Dark: running VMs. Light: shut-off VMs, which take their vCPUs again when they start." %}">
    <div class="progress" role="progressbar" style="width: {{ given.cpu_bar.running|stringformat:".1f" }}%"
         aria-label="{% trans "vCPUs of running VMs" %}" aria-valuenow="{{ given.cpu_bar.running|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"
         aria-valuetext="{% blocktrans with running=given.vcpus.running cpus=given.cpus %}{{ running }} of the host's {{ cpus }} CPUs{% endblocktrans %}">
        <div class="progress-bar {% if given.ratio > 4 %}bg-danger{% elif given.ratio > 2 %}bg-warning{% else %}bg-primary{% endif %}"></div>
    </div>
    <div class="progress" role="progressbar" style="width: {{ given.cpu_bar.stopped|stringformat:".1f" }}%"
         aria-label="{% trans "vCPUs of shut-off VMs" %}" aria-valuenow="{{ given.cpu_bar.stopped|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"
         aria-valuetext="{% blocktrans with stopped=given.vcpus.stopped cpus=given.cpus %}{{ stopped }} of the host's {{ cpus }} CPUs{% endblocktrans %}">
        <div class="progress-bar {% if given.ratio > 4 %}bg-danger{% elif given.ratio > 2 %}bg-warning{% else %}bg-primary{% endif %} bg-opacity-50"></div>
    </div>
</div>
<div class="small text-body-secondary mt-1">{% blocktrans with running=given.vcpus.running %}{{ running }} running{% endblocktrans %}</div>