<iqser-circle-button
    [matMenuTriggerFor]="menu"
    [showDot]="hasUnreadNotifications$ | async"
    [tooltipPosition]="'below'"
    [tooltip]="'notifications.button-text' | translate"
    buttonId="notification-button"
    icon="red:notification"
></iqser-circle-button>

<mat-menu #menu="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before">
    <ng-template matMenuContent>
        <ng-container *ngIf="groupedNotifications$ | async as groups">
            <iqser-empty-state
                *ngIf="!groups.length"
                [horizontalPadding]="40"
                [text]="'notification.no-data' | translate"
                [verticalPadding]="0"
            ></iqser-empty-state>

            <div *ngFor="let group of groups; let first = first">
                <div class="all-caps-label flex-align-items-center">
                    <div>{{ group.date }}</div>
                    <div
                        (click)="markRead()"
                        *ngIf="(hasUnreadNotifications$ | async) && first"
                        class="view-all"
                        id="notifications-mark-all-as-read-btn"
                        iqserStopPropagation
                    >
                        {{ 'notifications.mark-all-as-read' | translate }}
                    </div>
                </div>

                <div
                    (click)="markRead([notification], true)"
                    *ngFor="let notification of group.notifications; trackBy: trackBy"
                    [class.unread]="!notification.readDate"
                    [id]="'notifications-mark-as-read-' + notification.id + '-btn'"
                    class="notification"
                    iqserStopPropagation
                    mat-menu-item
                >
                    <iqser-initials-avatar [user]="notification.userId"></iqser-initials-avatar>

                    <div class="notification-content">
                        <div [innerHTML]="notification.message"></div>
                        <div class="small-label mt-2">{{ notification.creationDate | date : 'exactDate' }}</div>
                    </div>

                    <div
                        (click)="markRead([notification], !notification.readDate)"
                        [id]="'notifications-mark-' + notification.id"
                        class="dot"
                        iqserStopPropagation
                        matTooltip="{{ 'notifications.mark-as' | translate : { type: notification.readDate ? 'unread' : 'read' } }}"
                        matTooltipPosition="before"
                    ></div>
                </div>
            </div>
        </ng-container>
    </ng-template>
</mat-menu>
