{% extends "django_spire/dropdown/dropdown.html" %}

{% block dropdown_attributes %}
    x-data="notificationDropdown(
        '{% url 'django_spire:notification:app:json:check_new' %}',
        '{% url 'django_spire:notification:app:template:notification_dropdown' %}',
        '{% url 'django_spire:notification:app:json:set_viewed' %}',
        '{{ app_notification_list_url|default:''|escapejs }}'
    )"
{% endblock %}

{% block dropdown_menu_class %}dropdown-menu-end overflow-hidden p-0{% endblock %}

{% block dropdown_trigger %}
    <div class="position-relative" @click="renderDropdown()">
        {% block notification_dropdown_trigger %}
            {% include 'django_spire/icon/responsive_icon.html' with icon='bi bi-bell-fill' icon_class='mx-2' x_icon_click="await renderDropdown()" %}
            <span
                x-show="hasNewNotification"
                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-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>
        {% endblock %}
    </div>
{% endblock %}

{% block dropdown_content %}
    <li>
        <div
            x-show="hasContent"
            x-transition
            x-cloak
            style="width: min(380px, calc(100vw - 2rem)); max-height: 70vh;"
        >
            <div x-ref="appNotificationDropdownContent"></div>
        </div>
    </li>
{% endblock %}