{% extends "base_list.html" %}

{% block title %}{{ trend.title }}{% endblock %}

{% block lists %}
<div class="row mb-3">
  <div class="col-12">
    <a href="{% url 'trends:trends-home' %}" class="btn btn-sm btn-outline-secondary mb-2">&larr; All Trends</a>
    <h2>{{ trend.icon }} {{ trend.title }}</h2>
    <p class="text-muted">{{ trend.description }}</p>

    {% if supported_periods|length > 1 %}
    <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
      <nav class="btn-group btn-group-sm" role="group">
        {% for period_slug, period_label in supported_periods.items %}
        <a href="?period={{ period_slug }}"
           class="btn btn-sm {% if period_slug == current_period %}btn-primary{% else %}btn-outline-secondary{% endif %}">
          {{ period_label }}
        </a>
        {% endfor %}
      </nav>
      {% if prev_period or next_period %}
      <div class="btn-group btn-group-sm">
        {% if prev_period %}
        <a href="?period={{ prev_period }}" class="btn btn-outline-secondary">&laquo; Prev</a>
        {% endif %}
        {% if next_period %}
        <a href="?period={{ next_period }}" class="btn btn-outline-secondary">Next &raquo;</a>
        {% endif %}
      </div>
      {% endif %}
    </div>
    {% endif %}

    {% if computed_at %}
    <small class="text-muted">Last computed: {{ computed_at|date:"F j, Y H:i" }}</small>
    {% endif %}
  </div>
</div>

{% if trend_not_found %}
<div class="alert alert-warning">Trend not found.</div>

{% elif data is None %}
<div class="alert alert-info">
  No data computed yet for this period. Trends are updated once daily, check back later.
</div>

{% elif trend.slug == "concurrent-listening" %}
  {% include "trends/_concurrent_listening.html" %}

{% elif trend.slug == "concurrent-reading" %}
  {% include "trends/_concurrent_reading.html" %}

{% elif trend.slug == "reading-pace-vs-activity" %}
  {% include "trends/_reading_pace.html" %}

{% elif trend.slug == "trending-up" %}
  {% include "trends/_trending_up.html" %}

{% elif trend.slug == "peak-hours" %}
  {% include "trends/_peak_hours.html" %}

{% elif trend.slug == "weekly-rhythm" %}
  {% include "trends/_weekly_rhythm.html" %}

{% elif trend.slug == "activity-distribution" %}
  {% include "trends/_activity_distribution.html" %}

{% elif trend.slug == "mood-trajectory" %}
  {% include "trends/_mood_trajectory.html" %}

{% elif trend.slug == "mood-by-time" %}
  {% include "trends/_mood_by_time.html" %}

{% elif trend.slug == "mood-distribution" %}
  {% include "trends/_mood_distribution.html" %}

{% elif trend.slug == "mood-streaks" %}
  {% include "trends/_mood_streaks.html" %}

{% elif trend.slug == "mood-weather" %}
  {% include "trends/_mood_weather.html" %}

{% endif %}
{% endblock %}