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