
<mat-card [class.pb-0]="totalItems > pageSize">
  <mat-card-content>

    <div class="row">
      <div class="col-12">

        <!-- Loading skeleton -->
        <ng-container *ngIf="isLoading;else loaded">
          <app-loading-skeleton
            [amount]="5"
            colClass="mb-3"
            [blockHeight]="'40px'"
            [hasShadow]="false">
          </app-loading-skeleton>
        </ng-container>

        <ng-template #loaded>
          <div class="col-lg-4 offset-lg-8 col-12">
            <app-filter
              (filterList)="filterList($event)"
              buttonText="Add"
              (buttonClick)="addTask()">
            </app-filter>
          </div>

          <div class="table-responsive mt-1">

            <table
              mat-table
              [dataSource]="dataSource"
              class="w-100 borderless hoverable">

              <!-- Name column -->
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>Name</th>
                <td mat-cell *matCellDef="let element" class="text-nowrap text-truncate">{{element?.id}}</td>
              </ng-container>

              <!-- Description column -->
              <ng-container matColumnDef="description">
                <th mat-header-cell *matHeaderCellDef>Description</th>
                <td mat-cell *matCellDef="let element" class="text-nowrap text-truncate">{{element?.description ?? '-'}}</td>
              </ng-container>

              <!-- Repeats column -->
              <ng-container matColumnDef="duration">
                <th mat-header-cell *matHeaderCellDef class="text-nowrap">Schedules</th>
                <td mat-cell *matCellDef="let element" class="table-chips">

                  <mat-chip-list #chipGrid>
                    <mat-chip
                      *ngFor="let el of element?.schedules"
                      (removed)="deleteSchedule(el, element)">
                      {{el.repeats ? 'every ' + el.repeats : (el.due | date: 'd.M.YY HH:mm')}}

                      <button
                        matChipRemove
                        [attr.aria-label]="'remove ' + el">
                        <mat-icon>cancel</mat-icon>
                      </button>

                    </mat-chip>
                  </mat-chip-list>

                </td>
              </ng-container>

              <!-- Created column -->
              <ng-container matColumnDef="created">
                <th mat-header-cell *matHeaderCellDef class="text-nowrap">Created</th>
                <td mat-cell *matCellDef="let element" class="text-nowrap">
                  {{element?.created | date: 'dd.MM.YYYY HH:mm'}}
                </td>
              </ng-container>

              <!-- Actions column -->
              <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef class="px-3">Actions</th>
                <td mat-cell *matCellDef="let element" class="text-nowrap">

                  <button
                    mat-button
                    color="primary"
                    (click)="execute(element)">
                    Execute
                  </button>

                  <button
                    mat-button
                    color="primary"
                    (click)="editTask(element)">
                    Edit
                  </button>

                  <button
                    mat-button
                    color="primary"
                    (click)="schedule(element)">
                    Schedule
                  </button>

                  <button
                    mat-button
                    color="warn"
                    (click)="deleteTask(element)">
                    Delete
                  </button>

                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

              <!-- Row shown when there is no matching data. -->
              <tr class="mat-row" *matNoDataRow>
                <td class="mat-cell text-muted" colspan="5">
                  {{searchText !== '' ?
                    'Task with \'' + searchText + '\' in description or name does not exist' :
                    'No tasks found'}}
                </td>
              </tr>

            </table>
          </div>

          <mat-paginator
            *ngIf="totalItems > pageSize"
            [length]="totalItems"
            [pageSize]="pageSize"
            [pageIndex]="pageIndex"
            (page)="changePage($event)">
          </mat-paginator>

        </ng-template>
      </div>
    </div>

  </mat-card-content>
</mat-card>
