{% extends "base_list.html" %}

{% block title %}Trends{% endblock %}

{% block lists %}
<div class="row">
  {% if not user.is_authenticated %}
  <div class="col-12">
    <div class="alert alert-info">Log in to see your trends.</div>
  </div>
  {% elif not trends %}
  <div class="col-12">
    <div class="alert alert-info">
      No trends computed yet. Trends are computed once daily, check back later.
    </div>
  </div>
  {% else %}
  {% for trend in trends %}
  <div class="col-md-6 mb-3">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">
          <a href="{% url 'trends:trend-detail' trend.slug %}" class="stretched-link text-decoration-none">
            {{ trend.icon }} {{ trend.title }}
          </a>
        </h5>
        <p class="card-text text-muted">{{ trend.description }}</p>
        <div class="d-flex justify-content-between align-items-center">
          <div>
            {% if trend.computed_at %}
            <small class="text-muted">Last computed: {{ trend.computed_at|date:"M j, Y H:i" }}</small>
            {% else %}
            <span class="badge bg-warning text-dark">Pending</span>
            {% endif %}
          </div>
          <form method="post" action="{% url 'trends:trend-toggle-disabled' trend.slug %}" class="m-0">
            {% csrf_token %}
            {% if trend.disabled %}
            <button type="submit" class="btn btn-sm btn-outline-success">Enable</button>
            {% else %}
            <button type="submit" class="btn btn-sm btn-outline-danger">Disable</button>
            {% endif %}
          </form>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
  {% endif %}
</div>
{% endblock %}