<div class="row">
  <div class="col-12">
    {% if data %}
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Media Type</th>
            <th class="text-end">Recent ({{ current_period_label }})</th>
            <th class="text-end">Previous ({{ current_period_label }})</th>
            <th class="text-end">Change</th>
          </tr>
        </thead>
        <tbody>
          {% for mt, info in data.items %}
          <tr>
            <td>{{ mt }}</td>
            <td class="text-end">{{ info.recent }}</td>
            <td class="text-end">{{ info.previous }}</td>
            <td class="text-end">
              {% if info.change_pct > 0 %}
              <span class="text-success">+{{ info.change_pct }}%</span>
              {% elif info.change_pct < 0 %}
              <span class="text-danger">{{ info.change_pct }}%</span>
              {% else %}
              <span class="text-muted">0%</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No trending data found.</p>
    {% endif %}
  </div>
</div>
