<div class="row pt-1 px-3">
    <div class="col-12">
            <div class="row bg-app-layer-two-hover rounded">
                {% if app_notification.notification.url %}
                    <a href="{{ app_notification.notification.url }}" class="col-12">
                {% endif %}
                        <div class="col-12">
                            <div>
                                <span class="fs-7 fw-semibold">{{ app_notification.notification.title }}</span>
                                {% if not app_notification.viewed %}
                                    {% include 'django_spire/badge/primary_badge.html' with badge_text='New' %}
                                {% endif %}
                            </div>
                            <span class="fs--1">{{ app_notification.notification.body }}</span><br>
                            <span class="text-app-secondary text-muted fs--2">{{ app_notification.verbose_time_since_delivered }}</span>
                        </div>
                {% if app_notification.notification.url %}
                    </a>
                {% endif %}
            </div>
    </div>
    {% if not forloop.last %}
        <hr class="m-0 mt-1">
    {% endif %}
</div>
