<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- Left-hand side: Title -->
      <div class="col-md-6 mb-2">
        <span class="mb-0 page-title">{{'REMINDERS' | translate}}</span>
        <app-page-help-text [code]="'REMINDERS'"></app-page-help-text>
      </div>
      <!-- Right-hand side: Buttons -->
      <div class="col-md-6 d-flex justify-content-end mb-2">
        <button *hasClaim="'reminder_add'" [routerLink]="['/reminders/add']"
          class="btn btn-success btn-sm me-2">
          <i-feather name="plus"></i-feather>
          {{'ADD_REMINDER' | translate}}
        </button>
      </div>
    </div>
    <div class="card">
      <div class="body">
        <div class="table-responsive">
          <div class="grid-height-large">
            <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 *hasClaim="['reminder_edit','reminder_delete']" mat-icon-button
                    [matMenuTriggerFor]="menu" aria-label="Action">
                    <mat-icon>more_vert</mat-icon>
                  </button>
                  <mat-menu #menu="matMenu">
                    <button *hasClaim="'reminder_edit'" [routerLink]="['/reminders/manage',reminder.id]"
                      mat-menu-item>
                      <mat-icon>edit</mat-icon>
                      <span>{{'EDIT' | translate}}</span>
                    </button>
                    <button *hasClaim="'reminder_delete'" mat-menu-item (click)="deleteReminder(reminder)">
                      <mat-icon>delete</mat-icon>
                      <span>{{'DELETE' | translate}}</span>
                    </button>
                  </mat-menu>
                </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:'full'}} </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:'full'}} </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="action-search">
                <th mat-header-cell *matHeaderCellDef> </th>
              </ng-container>
              <ng-container matColumnDef="date-search">
                <th mat-header-cell *matHeaderCellDef> </th>
              </ng-container>
              <ng-container matColumnDef="enddate-search">
                <th mat-header-cell *matHeaderCellDef> </th>
              </ng-container>
              <ng-container matColumnDef="subject-search">
                <th mat-header-cell *matHeaderCellDef>
                  <input placeholder="{{'SUBJECT' | translate}}" type="text" class="form-control w-90"
                    [(ngModel)]="SubjectFilter">
                </th>
              </ng-container>
              <ng-container matColumnDef="message-search">
                <th mat-header-cell *matHeaderCellDef>
                  <input placeholder="{{'MESSAGE' | translate}}" type="text" class="form-control w-90 ml-2"
                    [(ngModel)]="MessageFilter">
                </th>
              </ng-container>
              <ng-container matColumnDef="frequency-search">
                <th mat-header-cell *matHeaderCellDef>
                  <mat-select panelClass="mat-select-control" placeholder="{{'FREQUENCY' | translate}}" [(ngModel)]="FrequencyFilter"
                    class="form-control  ml-3">
                    <mat-option [value]="">{{'NONE' | translate}}</mat-option>
                    <mat-option *ngFor="let frequency of reminderFrequencies" [value]="frequency?.id">
                      {{frequency?.name.toUpperCase() | translate}}
                    </mat-option>
                  </mat-select>
                </th>
              </ng-container>
              <ng-container matColumnDef="footer">
                <td mat-footer-cell colspan="7" *matFooterCellDef>
                  <mat-paginator [length]="reminderResource.totalCount" [pageSize]="reminderResource.pageSize"
                    [pageSizeOptions]="[10, 20, 30]">
                  </mat-paginator>
                </td>
              </ng-container>
              <tr *matNoDataRow>
                <td colspan="6">
                  <div class="pt-2 pl-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-header-row
                *matHeaderRowDef="['action-search','date-search','enddate-search','subject-search', 'message-search','frequency-search']">
              </tr>
              <tr mat-footer-row *matFooterRowDef="footerToDisplayed;sticky: true"></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>