{% load i18n tz %}
{% if notifications %}
  {% for notification in notifications %}
    <div class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <span class="status-dot status-dot-animated bg-{{ notification.tags }}"></span>
        </div>
        <div class="col text-truncate">
          <div class="text-body d-block">{{ notification.message }}</div>
          <div class="d-block text-muted text-truncate mt-n1">
            {{ notification.created|localtime|timesince }} {% translate "ago" %}
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
{% else %}
  <div class="list-group-item">
    <div class="text-muted text-center">{% translate "No notifications" %}</div>
  </div>
{% endif %}