<div class="row pt-1 px-3">
    <div class="col-12">
        {% if app_notification.notification.url %}
            <a x-if="notification.url !== ''" href="{{app_notification.notification.url}}" class="">
        {% endif %}
            <div class="row bg-app-layer-two-hover rounded">
                <div class="col-11">
                    <span class="fs-7">{{ app_notification.notification.title }}</span>
                    <span class="fs--1">{{ app_notification.notification.body }}</span>
                    <div class="col-12 pt-1 pb-2">
                        <span class="text-app-secondary fs--2">{{ app_notification.notification.verbose_time_since_creation }}</span> 
                        
                        {% if not app_notification.viewed %}
                            {% include "spire/badge/primary_badge.html" with badge_text='New' %} 
                        {% endif %}
                    </div>
                </div>
            </div>
        {% if app_notification.notification.url %}
            </a>
    {% endif %}
    </div>
    <hr class="m-0 mt-1"></hr>
</div>