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

{% block dropdown_attributes %}
    x-data="{
        hasContent: false,
        hasNewNotification: false,
        isLoading: false,

        async init() {
            await this.checkForNewNotifications();
            setInterval(() => this.checkForNewNotifications(), 30000);
        },

        async checkForNewNotifications() {
            let response = await Glue.fetch('{% url "django_spire:notification:app:json:check_new" %}');
            this.hasNewNotification = response.has_new_notifications;
        },

        async renderDropdown() {
            if (this.isLoading) {
                return;
            }

            this.isLoading = true;

            try {
                let dropdownContent = Glue.view(
                    '{% url "django_spire:notification:app:template:notification_dropdown" %}',
                    {app_notification_list_url: `{{ app_notification_list_url|default:'' }}`}
                );

                await dropdownContent.renderInnerHtml(this.$refs.appNotificationDropdownContent);
                await this.markNotificationsAsViewed();
                this.hasContent = true;
            }
            finally {
                this.isLoading = false;
            }
        },

        async markNotificationsAsViewed() {
            await Glue.fetch('{% url "django_spire:notification:app:json:set_viewed" %}');
            this.hasNewNotification = false;
        }
    }"
{% 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 %}