<section class="content">
  <div class="content-block">
    <div class="block-header">
      <div class="breadcrumb-main">
        <div class="row">
          <div class="col-md-6 mb-2">
            <span class="mb-0 page-title">{{ "NOTIFICATIONS" | translate }}
              <app-page-help-text [code]="'NOTIFICATIONS'"></app-page-help-text>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="card">
          <div class="body">
            <div class="row margin-2">
              <div class="col-md-6">
                <input class="form-control" placeholder="{{'SEARCH_BY_DOCUMENT_NAME_OR_MESSAGE' | translate}}" #input>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="table-responsive">
                  <div class="grid-height-medium">
                    <table mat-table [dataSource]="dataSource" class="w-100" matSort matSortActive="createdDate"
                      matSortDirection="desc">
                      <ng-container matColumnDef="action">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'ACTION' | translate}} </th>
                        <td mat-cell *matCellDef="let notification">
                          <button *ngIf="notification.documentId" (click)="viewDocument(notification)" type="button"
                            class="btn btn-sm btn-success">
                            <i class="las la-eye"></i> {{'VIEW_DOCUMENT' | translate}}
                          </button>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="createdDate">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'DATE' | translate}} </th>
                        <td mat-cell *matCellDef="let notification"> {{notification.createdDate |
                          utcToLocalTime:'short'}}
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="message">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'MESSAGE' | translate}} </th>
                        <td mat-cell *matCellDef="let notification">
                          <span *ngIf="!notification.isRead" class="badge bg-success">new</span>
                          <ng-container *ngIf="!notification.message">
                            <b> {{notification.documentName}}</b> {{'DOCUMENT_PERMISSION_GRANTED_TO_YOU' | translate}}
                          </ng-container>
                          <ng-container *ngIf="notification.message">
                            <b>{{'REMINDER' | translate}}</b> ::
                            <ng-container *ngIf="notification.documentId">
                              <b> {{'DOCUMENT_NAME' | translate}}</b> : {{notification.documentName}} ::
                            </ng-container>
                            {{notification.message}}
                          </ng-container>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="footer">
                        <td mat-footer-cell colspan="4" *matFooterCellDef>
                          <mat-paginator [length]="notificationResource.totalCount"
                            [pageSize]="notificationResource.pageSize" [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
                        </td>
                      </ng-container>
                      <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                      <tr mat-footer-row *matFooterRowDef="['footer']; sticky: true"></tr>
                      <tr *matNoDataRow>
                        <td colspan="4">
                          <div class="m-2">
                            <b> {{ "NO_DATA_FOUND" | translate }}</b>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="loading-shade" *ngIf="dataSource.loading$ | async">
  <mat-spinner></mat-spinner>
</div>