{% extends "django_spire/notification/app/dropdown/notification_dropdown.html" %}

{% block notification_dropdown_trigger %}
    <div class="dropdown">
        {% include 'django_spire/icon/responsive_icon.html' with icon='bi bi-bell-fill' font_size='ds-fs-3' icon_class='mx-1' icon_attributes="x-bind='trigger'" %}
        <span
            x-show="new_notification"
            x-cloak
            x-transition
            style="width: 10px; height: 10px; top: 8px; right: 10px; position: absolute;"
            class="bg-danger rounded-circle"
        ></span>
        <span x-show="isLoading" x-transition x-cloak class="text-app-primary position-absolute top-50 start-50 translate-middle">
            <span class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
        </span>
    </div>
{% endblock %}
