<li class="dropdown dropdown-custom" id="notificationsDropdown">
    <a href="javascript: void(0);" onclick="Mautic.showNotifications();" class="dropdown-toggle dropdown-notification" data-toggle="dropdown" aria-label={{ 'mautic.core.notifications'|trans }}>
        {% set hideClass = updateMessage.isNew or showNewIndicator ? '' : ' hide' %}
        <span class="label label-danger{{ hideClass }}" id="newNotificationIndicator"><i class="ri-asterisk"></i></span>
        <span class="ri-notification-3-line ri-xl"></span>
    </a>
    <div class="dropdown-menu">
        <div class="panel panel-default">
            <div class="panel-heading pt-sm">
                <div class="panel-title notification notification-title">
                    <h6 class="fw-sb d-flex jc-space-between ai-center">{{ 'mautic.core.notifications'|trans }}
                        {% if notifications is not empty %}
                            {% include '@MauticCore/Helper/button.html.twig' with {
                                buttons: [
                                    {
                                        label: 'mautic.core.notifications.clearall',
                                        variant: 'ghost',
                                        size: 'xs',
                                        icon_only: true,
                                        icon: 'ri-delete-bin-2-line',
                                        attributes: {
                                            'class': 'pull-right',
                                        },
                                        onclick: 'Mautic.clearNotification(0);'
                                    }
                                ]
                            } %}
                        {% endif %}
                    </h6>
                </div>
            </div>
            <div class="pt-0 pb-xs pl-0 pr-0">
                <div class="scroll-content slimscroll d-flex fd-column" id="notifications">
                    {{ include('@MauticCore/Notification/notification_messages.html.twig', {
                        notifications: notifications,
                        updateMessage: updateMessage
                    }) }}
                    {% set class = notifications is not empty ? ' hide' : '' %}
                    <div class="{{ class }} mautibot-image pa-lg d-flex fd-column ai-center jc-center" id="notificationMautibot">
                        <div class="fs-30">🦄</div>
                        <div class="text-secondary fw-sb">{{'mautic.core.notifications.empty'|trans}}</div>
                        <div class="text-secondary">{{'mautic.core.notifications.empty_extra'|trans}}</div>
                    </div>
                </div>
            </div>
            {% set lastNotification = notifications|first %}
            <input id="mauticLastNotificationId" type="hidden" value="{{ lastNotification.id is defined ? lastNotification.id|escape : '' }}" />
        </div>
    </div>
</li>
