{% load humanize i18n hq %}
<div class="card hq-card">
    <h2 class="card-title">{% hq_icon "hard-drive" %} {% translate "Storage" %}</h2>
    <p class="card-sub">{% translate "How full the box is, and what this application accounts for" %}</p>
    <div class="hq-donuts">
        {% if storage.disk_chart %}
            {% include "hq/panels/_donut.html" with chart=storage.disk_chart chart_title=_("Disk") only %}
        {% endif %}
        {% if storage.application_chart %}
            {% include "hq/panels/_donut.html" with chart=storage.application_chart chart_title=_("This application") only %}
        {% endif %}
    </div>
    {% if not storage.media_measured %}
        <p class="note hq-note">
            {% hq_icon "info" %}
            <span>{% translate "The media directory was not measured." %}</span>
        </p>
    {% elif storage.media is None and storage.media_path %}
        <p class="note hq-note">
            {% hq_icon "info" %}
            <span>{% blocktranslate with path=storage.media_path %}{{ path }} could not be measured — it is missing, or larger than the file budget.{% endblocktranslate %}</span>
        </p>
    {% endif %}
</div>