
<!-- <div class="toolbar-notification-container">
  <button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
    <mat-icon>notifications_none</mat-icon>
    <span class="badge" *ngIf="badgeCount !== 0">{{ badgeCount }}</span>
  </button>

  <div class="dropdown mat-elevation-z4" [class.open]="isOpen">

    <div class="card">
      <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
        <div class="title">
          <div class="name">Notifications</div>
          <div class="extra">
            <button mat-button (click)="handleMarkAllAsRead()">Mark all as read</button>
          </div>
        </div>
        <button type="button" mat-icon-button>
          <mat-icon class="icon">settings</mat-icon>
        </button>
      </div>
      <div *ngIf="notifications?.length !== 0; then thenBlock else elseBlock;"></div>
      <div class="footer" fxLayout="row" fxLayoutAlign="center center">
        <div class="action" (click)="handleViewAll()">View All</div>
      </div>
    </div>

  </div>

</div>

<ng-template #thenBlock>
  <perfect-scrollbar class="content">
    <div *ngFor="let notification of notifications;">
      <div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple [ngClass]="{'highlight': notification.confirmDate === null}" (click)="handleClick(notification)" > 
        <mat-icon class="icon">notifications</mat-icon>
        <div class="title" fxLayout="column">
          <div class="name">{{ notification.message }}</div>
          <div class="time">{{ notification.member.name }}</div>
        </div>
        <span fxFlex></span>
        <button type="button" mat-icon-button (click)="mark(notification, $event)">
          <mat-icon class="close" matTooltip="Mark as read">check circle</mat-icon>
        </button>
      </div>
      <div class="divider" *ngIf="!isLast"></div>
    </div>
  </perfect-scrollbar>
</ng-template>

<ng-template #elseBlock>
  <div class="no" fxLayout="row" fxLayoutAlign="center center">No notification found.</div>
</ng-template> -->