<div
    :style="window.innerWidth < 768
    ? 'width: 350px; position: fixed; top: 5%; left: 50%; transform: translateX(-50%);'
    : 'width: 350px'"
    class="container border rounded-2"
>
    <div class="col-12 w-100">
        <h6 class="mt-2 ms-2 text-app-secondary text-center">Notifications</h6>
        <hr class="m-0">
    </div>

    <div style="max-height: 300px !important; overflow-x: hidden !important; overflow-y: scroll !important;" class="text-start">
        {% for app_notification in app_notification_list %}
            <div class="col-12">
                {% include app_notification.template %}
            </div>
        {% empty %}
            No Notifications
        {% endfor %}
    </div>
    <div class="col-12">
        <hr class="m-0">
    </div>
    <div class="col-12 fs-7 text-center py-1">
        {% if not app_notification_list_url %}
            {% url "django_spire:notification:app:page:list" as app_notification_list_url %}
        {% endif %}
        <a href='{{ app_notification_list_url }}' class="text-decoration-none text-app-secondary my-2">View All</a>
    </div>
</div>
