{% if a4btheme_notifications is not defined %}
    {% set a4btheme_notifications = a4btheme_notifications() %}
    {% if a4btheme_notifications is not null %}
        {% set notifications = a4btheme_notifications.notificationsIndexedByGroup %}
        {% set notificationGroups = a4btheme_notifications.notificationGroups %}
        {% set total = a4btheme_notifications.total %}
    {% endif %}
{% endif %}
<div class="dropdown">
    <div class="topbar-item" data-toggle="dropdown" data-offset="10px,0px">
        <div class="btn btn-icon btn-clean btn-dropdown btn-lg mr-1 pulse pulse-primary">
            <span class="svg-icon svg-icon-xl svg-icon-primary">
                <i class="fas fa-envelope-open-text text-primary"></i>
            </span>
            {% if total > 0 %}
                <span class="pulse-ring"></span>
            {% endif %}
        </div>
    </div>
    <div class="dropdown-menu p-0 m-0 dropdown-menu-right dropdown-menu-anim-up dropdown-menu-lg">
        <form>
            <div class="d-flex flex-column pt-12 bgi-size-cover bgi-no-repeat rounded-top"
                 style="background-image: url({{ asset('bundles/a4btheme/media/misc/bg-1.jpg') }}">
                <h4 class="d-flex flex-center rounded-top">
                    <span class="text-white">{{ 'user.notifications'|trans  }}</span>
                    <span class="btn btn-text btn-success btn-sm font-weight-bold btn-font-md ml-2">{{ total }}</span>
                </h4>
                <ul class="nav nav-bold nav-tabs nav-tabs-line nav-tabs-line-3x nav-tabs-line-transparent-white nav-tabs-line-active-border-success mt-3 px-8"
                    role="tablist">
                    {% for notificationGroup in notificationGroups %}
                        <li class="nav-item">
                            <a class="nav-link{% if loop.first %} active show{% endif %}" data-toggle="tab"
                               href="#topbar_notifications_{{ notificationGroup }}">{{ notificationGroup|trans }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="tab-content p-8">
                {% for notificationGroup, groupNotifications in notifications %}
                    <div class="tab-pane{% if loop.first %} active show{% endif %}" id="topbar_notifications_{{ notificationGroup }}" role="tabpanel">
                        <div class="scroll pr-7 mr-n7" data-scroll="true" data-height="300" data-mobile-height="200">
                            {% for notification in groupNotifications %}
                                <div class="d-flex align-items-center mb-6">
                                    <div class="symbol symbol-40 symbol-light-{{ notification.type }} mr-5">
                                        <span class="symbol-label">
                                            <i class="far {{ notification.icon }} text-{{ notification.type }}"></i>
                                        </span>
                                    </div>
                                    <div class="d-flex flex-column font-weight-bold">
                                        <a href="{{ notification.link }}" class="text-dark text-hover-{{ notification.type }} mb-1 font-size-lg">
                                            {{ notification.title|trans }}
                                        </a>
                                        <span class="text-muted">{{ notification.message|trans }}</span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
                {% if notifications is empty %}
                    <div class="tab-pane active show" id="topbar_notifications_logs"
                         role="tabpanel">
                        <div class="d-flex flex-center text-center text-muted min-h-200px">
                            {{ 'notifications.empty'|trans }}
                        </div>
                    </div>
                {% endif %}
            </div>
        </form>
    </div>
</div>