<div class="row">
    <div class="col-12">
      <div class="card card-body">
        <h4 class="card-title">รายการหลักสูตร</h4>
        <div class="d-flex mb-3 mt-3">
          <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
        </div>
        <div class="table-responsive">
          <table class="table table-striped mb-0 no-wrap v-middle ">
            <thead class="bg-info text-white">      
             <tr>
                <th class="text-center" scope="col">#</th>
                <th scope="col">รูปภาพ</th>
                <th scope="col">ชื่อ</th>
                <th scope="col">รายละเอียด</th>
                <th scope="col">ประเภทหลักสูตร</th>
                <th scope="col">ลิงค์</th>
                <th scope="col">สถานะ</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="listCourse.length == 0">
                <td colspan="8" class="text-center">ไม่พบข้อมูล</td>
              </tr>
              <tr  *ngFor="let data of filterListCourse() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                <td class="text-center">{{i+1}}</td>
                <td><img width="100" class="border p-1" src="{{data.thumbnail}}"></td>
                <td>{{ data.thName }}</td>
                <td class="text-wrap">{{ data.thDesc }}</td>
                <td>{{data.ctype}}</td>
                <td><a href="{{data.link1}}"  target="_blank">คลิก</a></td>
                <td>{{ getStatus(data.status) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="d-flex justify-content-end py-2">
  
          <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize"  (ngModelChange)="page">
            <option [ngValue]="10">รายการต่อหน้า: 10</option>
            <option [ngValue]="50">รายการต่อหน้า: 50</option>
            <option [ngValue]="100">รายการต่อหน้า: 100</option>
          </select>
          <ngb-pagination  [(page)]="page" [pageSize]="pageSize" [collectionSize]="listCourse.length" [maxSize]="3" [rotate]="true">
            <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
            <ng-template ngbPaginationNext>ถัดไป</ng-template>
          </ngb-pagination>
  
        </div>
  
      </div>
    </div>
  </div>