{% extends 'base.html' %}

{% block content %}
<div class="container py-4">
  <div class="row mb-3">
    <div class="col">
      <h1>Notifications</h1>
      {% if notifications %}
      <div class="list-group">
        {% for notification in notifications %}
          <div class="list-group-item {% if notification.unread %}list-group-item-primary{% endif %}">
            <div class="d-flex w-100 justify-content-between align-items-start">
              <div>
                <h5 class="mb-1">{{ notification.verb }}</h5>
                <p class="mb-1 text-muted">{{ notification.data.message|default:'' }}</p>
                <small>{{ notification.created_at|date:'M j, Y H:i' }}</small>
              </div>
              <div>
                {% if notification.unread %}
                  <a href="{% url 'core:notification_mark_read' notification.pk %}" class="btn btn-sm btn-outline-secondary">Mark read</a>
                {% endif %}
              </div>
            </div>
            {% if notification.target_url %}
              <a href="{{ notification.target_url }}" class="stretched-link"></a>
            {% endif %}
          </div>
        {% endfor %}
      </div>
      {% else %}
        <div class="alert alert-secondary">You have no notifications yet.</div>
      {% endif %}
      <a href="{% url 'core:subscription_plans' %}" class="btn btn-link mt-3">Browse subscription plans</a>
    </div>
  </div>
</div>
{% endblock %}