{% load i18n %}

<div class="dji-row">
    <div class="dji-card">
        <h3>{% trans "Traffic Sources" %} <small>({{ source_total }} {% trans "total" %})</small></h3>
        {% for source in sources %}
        <div class="dji-bar">
            <div class="dji-bar-header">
                <span class="dji-bar-label">{{ source.label }}</span>
                <span class="dji-bar-val">{{ source.views }} ({{ source.pct_str }}%)</span>
            </div>
            <div class="dji-bar-track">
                <div class="dji-bar-fill dji-bkg-{{ source.source }}" style="width:{{ source.pct_str }}%"></div>
            </div>
        </div>
        {% empty %}
        <p class="dji-muted">{% trans "No data." %}</p>
        {% endfor %}
    </div>

    <div class="dji-card">
        <h3>{% trans "Devices" %} <small>({{ device_total }} {% trans "total" %})</small></h3>
        {% for device in devices %}
        <div class="dji-bar">
            <div class="dji-bar-header">
                <span class="dji-bar-label">{{ device.label }}</span>
                <span class="dji-bar-val">{{ device.views }} ({{ device.pct_str }}%)</span>
            </div>
            <div class="dji-bar-track">
                <div class="dji-bar-fill dji-bkg-{{ device.device }}" style="width:{{ device.pct_str }}%"></div>
            </div>
        </div>
        {% empty %}
        <p class="dji-muted">{% trans "No data." %}</p>
        {% endfor %}
    </div>
</div>
