<div class="row">
  <div class="col-12">
    {% if data.distribution %}
    <p class="text-muted mb-3">
      Total scrobbles{% if current_period_label %} ({{ current_period_label }}){% endif %}: <strong>{{ data.total_count }}</strong>
    </p>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Media Type</th>
            <th class="text-end">Total</th>
            <th class="text-end">Completed</th>
            <th class="text-end">%</th>
            <th>Distribution</th>
          </tr>
        </thead>
        <tbody>
          {% with max=data.distribution.0.count %}
          {% for entry in data.distribution %}
          <tr>
            <td>{{ entry.media_type }}</td>
            <td class="text-end">{{ entry.count }}</td>
            <td class="text-end">{{ entry.completed }}</td>
            <td class="text-end">{{ entry.pct }}%</td>
            <td style="width: 30%;">
              {% if max > 0 %}
              <div class="progress" style="height: 12px;">
                <div class="progress-bar" role="progressbar"
                     style="width: {{ entry.pct }}%;"
                     aria-valuenow="{{ entry.count }}"
                     aria-valuemin="0" aria-valuemax="{{ max }}">
                </div>
              </div>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
          {% endwith %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No activity data found.</p>
    {% endif %}
  </div>
</div>
