<div class="d-flex">
  <span mat-dialog-title class="dialog-title">
    {{ "REMINDERS" | translate }} <app-page-help-text code="REMINDERS"></app-page-help-text></span>
  <button mat-icon-button class="close-button ms-auto" (click)="closeDialog()">
    <mat-icon class="close-icon" color="warn">close</mat-icon>
  </button>
</div>
<div mat-dialog-content>
  <div class="row">
    <div class="col-sm-12">
      <div class="table-responsive">
        <div class="grid-height-reminder">
          <table mat-table [dataSource]="dataSource" matSort matSortActive="createdDate" matSortDirection="desc">
            <ng-container matColumnDef="action">
              <th mat-header-cell *matHeaderCellDef>
              </th>
              <td mat-cell *matCellDef="let reminder">
                <button class="btn btn-success btn-sm" (click)="onDetail(reminder)" type="button">
                  <i-feather name="eye" class="small-icon"></i-feather>
                </button>
                &nbsp;&nbsp;
                <button class="btn btn-danger btn-sm" (click)="deleteReminder(reminder)" type="button">
                  <i-feather name="trash" class="small-icon"></i-feather>
                </button>
              </td>
            </ng-container>
            <ng-container matColumnDef="documentName">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'DOCUMENT' | translate}} </th>
              <td mat-cell *matCellDef="let reminder"> {{reminder.documentName }} </td>
            </ng-container>
            <ng-container matColumnDef="startDate">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'START_DATE' | translate}} </th>
              <td mat-cell *matCellDef="let reminder"> {{reminder.startDate | utcToLocalTime:'short'}} </td>
            </ng-container>
            <ng-container matColumnDef="endDate">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'END_DATE' | translate}} </th>
              <td mat-cell *matCellDef="let reminder"> {{reminder.endDate | utcToLocalTime:'short'}} </td>
            </ng-container>
            <ng-container matColumnDef="subject">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'SUBJECT' | translate}} </th>
              <td mat-cell *matCellDef="let reminder"> {{reminder.subject | limitTo: '100'}} </td>
            </ng-container>
            <ng-container matColumnDef="message">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'MESSAGE' | translate}} </th>
              <td mat-cell *matCellDef="let reminder"> {{reminder.message | limitTo: '150'}} </td>
            </ng-container>
            <ng-container matColumnDef="frequency">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'FREQUENCY' | translate}} </th>
              <td mat-cell *matCellDef="let reminder"> {{reminder.frequency | frequency | translate}} </td>
            </ng-container>

            <ng-container matColumnDef="footer">
              <td mat-footer-cell colspan="7" *matFooterCellDef>
                <mat-paginator [length]="reminderResource.totalCount" [pageSize]="reminderResource.pageSize"
                  [pageSizeOptions]="[15, 20, 30]">
                </mat-paginator>
              </td>
            </ng-container>
            <tr *matNoDataRow>
              <td colspan="7">
                <div class="m-2">
                  <b> {{ "NO_DATA_FOUND" | translate }}</b>
                </div>
              </td>
            </tr>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            <tr mat-footer-row *matFooterRowDef="footerToDisplayed"></tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="loading-shade" *ngIf="dataSource.loading$ | async">
  <mat-spinner></mat-spinner>
</div>