<div class="row">
  <div class="col-12">
    {% if data.trajectory %}
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Date</th>
            <th class="text-end">Avg Quality</th>
            <th class="text-end">Check-ins</th>
            <th>Mood Bar</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in data.trajectory %}
          <tr>
            <td>{{ entry.date }}</td>
            <td class="text-end">{{ entry.avg_quality }}</td>
            <td class="text-end">{{ entry.count }}</td>
            <td style="width: 40%;">
              <div class="progress" style="height: 16px;">
                <div class="progress-bar {% if entry.avg_quality >= 5 %}bg-success{% elif entry.avg_quality >= 4 %}bg-info{% elif entry.avg_quality >= 3 %}bg-warning{% else %}bg-danger{% endif %}"
                     role="progressbar"
                     style="width: {% widthratio entry.avg_quality 7 100 %}%;"
                     aria-valuenow="{{ entry.avg_quality }}"
                     aria-valuemin="1" aria-valuemax="7">
                </div>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No mood check-in data found.</p>
    {% endif %}
  </div>
</div>
