<alert></alert>
<app-loader *ngIf="loading$ | async"></app-loader>
<div *ngIf="!(loading$ | async)">
  <div *ngIf="(Data$ | async).length > 0">
    <div class="table-responsive">
      <table class="table table-bordered table-hover table-striped no-wrap">
        <thead>
          <tr>
            <th>
              <div class="checkbox">
                <input
                  [(ngModel)]="selectall"
                  (ngModelChange)="processChange()"
                  id="selectall"
                  type="checkbox"
                />
                <label class="p-b-0 p-t-0" for="selectall"></label>
              </div>
            </th>
            <th>Topic</th>
            <th>Detail Topic</th>
            <th>--</th>
          </tr>
        </thead>
        <tbody>
          <tr
            [@fadeIn]="''"
            [hidden]="item.isdeleted"
            *ngFor="let item of Data$ | async; trackBy: getKey; let i = index"
          >
            <td style="width:5%;">
              <div class="checkbox">
                <input
                  [(ngModel)]="item.Selected"
                  id="{{ item.id }}"
                  (ngModelChange)="checkChange()"
                  type="checkbox"
                />
                <label for="{{ item.id }}"></label>
              </div>
            </td>

            <td>
              <a
                class="text-bigger"
                href
                (click)="viewRecord(item, $event); (false)"
                >{{ item.term }}</a
              >
            </td>

            <td>
              {{ item.term_complete }}
            </td>

            <td class="text-nowrap">
              <a
                (click)="editRecord(item, $event); (false)"
                href="#"
                data-toggle="tooltip"
                data-original-title="Edit"
              >
                <i class="fa fa-pencil text-inverse m-r-10"></i>
              </a>
              <a
                (click)="delete(item, i, $event); (false)"
                href="#"
                data-toggle="tooltip"
                data-original-title="Close"
              >
                <i class="fa fa-close text-danger"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <app-norecord *ngIf="(Data$ | async).length === 0"></app-norecord>
</div>

<div class="text-center content-group-lg pt-20">
  <pagination
    [currentPage]="(pagination$ | async).currentPage"
    [totalRecords]="(pagination$ | async).totalRecords"
    [pageSize]="(pagination$ | async).pageSize"
    (OnSelection)="PaginationChange($event)"
  >
  </pagination>
</div>
