<div class="row">
  <div class="col-12">
    {% if data.current_streak %}
    <div class="alert alert-info">
      <strong>Current streak:</strong>
      {{ data.current_streak.length }} consecutive
      <span class="{% if data.current_streak.mood_type == 'positive' %}text-success{% else %}text-danger{% endif %}">
        {{ data.current_streak.mood_type }}
      </span>
      check-ins since {{ data.current_streak.start_date }}.
    </div>
    {% endif %}

    {% if data.streaks %}
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>#</th>
            <th>Mood Type</th>
            <th class="text-end">Length</th>
            <th>Start</th>
            <th>End</th>
          </tr>
        </thead>
        <tbody>
          {% for streak in data.streaks %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>
              <span class="{% if streak.mood_type == 'positive' %}text-success{% elif streak.mood_type == 'negative' %}text-danger{% endif %}">
                {{ streak.mood_type|title }}
              </span>
            </td>
            <td class="text-end">{{ streak.length }}</td>
            <td>{{ streak.start_date }}</td>
            <td>{{ streak.end_date }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No streak data found.</p>
    {% endif %}
  </div>
</div>
