{% load humanize i18n hq %}
<div class="card hq-card">
    <h2 class="card-title">{% hq_icon "server" %} {% translate "Runtime" %}</h2>
    <p class="card-sub">{% translate "The container that served this request, and the versions it runs on" %}</p>
    <dl class="hq-facts">
        <div class="hq-row">
            <dt>
                {% include "hq/panels/_brand_mark.html" with brand=docker_icon only %}
                {% translate "Container" %}
            </dt>
            <dd>
                {% if container_id %}
                    <span class="mono">{{ container_id }}</span>
                {% else %}
                    <span class="muted">{% translate "outside Docker" %}</span>
                {% endif %}
            </dd>
        </div>
        <div class="hq-row">
            <dt>{% hq_icon "timer" %}{% translate "Uptime" %}</dt>
            <dd>
                {% if uptime %}
                    <span class="num">{{ uptime }}</span>
                {% else %}
                    <span class="muted">—</span>
                {% endif %}
            </dd>
        </div>
        {% comment %}
            DEBUG on a deployed box leaks tracebacks and settings to anyone who can
            provoke an error, so it is stated rather than assumed — and coloured when
            it is on.
        {% endcomment %}
        <div class="hq-row">
            <dt>{% hq_icon "bug" %}{% translate "Debug" %}</dt>
            <dd>
                {% if debug %}
                    <span class="hq-flag hq-flag-on">{% translate "on" %}</span>
                {% else %}
                    <span class="num">{% translate "off" %}</span>
                {% endif %}
            </dd>
        </div>
        {% for entry in runtime %}
            <div class="hq-row">
                <dt>
                    {% include "hq/panels/_brand_mark.html" with brand=entry.brand only %}
                    {{ entry.label }}
                </dt>
                <dd class="num">{{ entry.value }}</dd>
            </div>
        {% endfor %}
    </dl>
</div>