<div class="row">
  <div class="col-12">
    {% if data.moods %}
    <p class="text-muted mb-3">
      Total mood check-ins{% if current_period_label %} ({{ current_period_label }}){% endif %}: <strong>{{ data.total }}</strong>
      &middot; Positive: <strong>{{ data.positive_count }}</strong>
      &middot; Negative: <strong>{{ data.negative_count }}</strong>
    </p>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Mood</th>
            <th class="text-end">Count</th>
            <th>Distribution</th>
          </tr>
        </thead>
        <tbody>
          {% with max=data.moods.0.count %}
          {% for entry in data.moods %}
          <tr>
            <td>{{ entry.mood }}</td>
            <td class="text-end">{{ entry.count }}</td>
            <td style="width: 40%;">
              {% if max > 0 %}
              <div class="progress" style="height: 12px;">
                <div class="progress-bar" role="progressbar"
                     style="width: {% widthratio entry.count max 100 %}%;"
                     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 mood distribution data found.</p>
    {% endif %}
  </div>
</div>
